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!