Código HTML
CSS
Resultado
Asimismo, podemos aplicarle una opacidad entre 0 y 1, y elegir distinto radio si nos posicionamos encima de estos.
Resultado
Podemos trabajar el mismo código indicando esto desde el nav, para ello usaremos selectores de not dentro de la sección, es decir
nav:hover a:not(:hover) {
}
nav:hover a:hover {
}
Ejemplo.
HTML
CSS
Vistazo
Y con eso podemos llegar a hacer muchas más cosas, según aplicamos a tablas, tds, etc.
Si queremos afinar la transición, añadiremos el atributo transition, que nos permite hacer que el efecto se realice en x tiempo
A continuación dejo el código del HTML y del CSS
HTML
<!DOCTYPE
html>
<html>
<head>
<title>Botones
redondeados</title>
<link rel="stylesheet"
type="text/css" href="css/estilos.css"
media="screen" />
<meta charset="UTF-8"
/>
</head>
<body>
<nav>
<a
href="www.finofilipino.org"
target="_blank">FinoFilipino</a>
<a
href="www.forocoches.com"
target="_blank">Forocoches</a>
<a href="series.ly"
target="_blank">Series.ly</a>
</nav>
<section>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</section>
</body>
</html>
CSS
body {
background-color:
grey;
}
a {
background-color:
black;
color:
white;
padding:
5px;
border-color:
#000000;
border-style:
solid;
border-width:
2px;
border-radius:
35px;
opacity: 1;
}
nav:hover a:hover {
background-color:
yellow;
border-radius:
0px;
color:
black;
opacity: 1;
transition-duration:
1s;
}
nav:hover a:not(:hover) {
opacity:
0.5;
}
section {
position:
absolute;
top: 50px;
}
table {
border:
solid organge 3px;
border-radius:
10px;
}
table td:hover{
background-color:
white;
}
td {
border: 2px
solid white;
padding:
5px;
border-radius:
10px;
}
0 comentarios:
Publicar un comentario