Estilos css para enlaces. :link, :visited:, :hover, :active

Estilos css para enlaces. :link, :visited:, :hover, :active

5
(2)

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;
}
boton gif

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.