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

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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

1 Comment
  • mauricio gonzalez
    Posted at 05:48h, 12 julio Responder

    Hola, 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

Post A Comment