18 Mar Estilos css para enlaces. :link, :visited:, :hover, :active
Los estilos por defecto de un enlace html son
- Color azul y subrayado en su estado normal.
- Color rojo y subrayado cuando se activan.
- Permanecen violetas y subrayados una vez han sido clicados y se accede de nuevo a la página.
En muchos casos es posible que estos estilos por defecto no se adapten a nuestras necesidades.
¿Como podemos modificar a voluntad los estilos para cada estado?
Selectores :hover, :active, :visited, :link
Para un enlace podemos definir los estados:
- :link, el estado natural del enlace cuando todavía nunca se ha inter actuado con él.
- :visited, el estado en el que queda un enlace una vez ya ha sido visitado y se carga de nuevo el documento web.
- :hover, el instante en el que el cursor se sitúa encima del enlace.
- :active, el instante en el que se está presionando el enlace.
Definiendo cada uno de los estados anteriores podemos personalizar un enlace.
Es importante que si queremos usarlos todos para dar estilos a un mismo enlace, el orden debe ser estrictamente :link, :visited, :hover, :active.
Generar un botón
Dado un enlace con una clase de nombre button podríamos escribir los siguientes estilos:
.button{
padding:10px 15px;
border:1px solid #ff0064;
border-radius:5px;
background-color:#ff0064;
color:#fff;
text-decoration:none;
text-transform:uppercase;
text-align:center;
box-shadow:1px 1px 1px #000;
display:inline-block;
}
.button:hover{
cursor:pointer;
}
.button:active{
box-shadow:2px 2px 1px #000;
}
Estos estilos nos servirían para simular un botón.
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
mauricio gonzalez
Posted at 05:48h, 12 julioHola, buen día, estoy buscando algo muy simple pero no encuentro la respuesta, quiero maquetar una pagina como esta, en donde a los lados queda un espacio sin usar, imagino que se hizo con un max width. yo solo quiero centrar un div al cual le doy un porcentaje de 60%, y quiero el 40% restante dividido entre ambos lados, pero al darle el porcentaje al div, siempre me toma la parte izquierda, no me lo centra, ya probé margin: 0 auto, justify content: center, text align: center, y todo lo que se pueda poner center pero no lo hace, me puedes orientar? Gracias por leerme