30+1 maneras de resaltar un enlace con hover

Estas son sólo algunas de las maneras en las que puedes cambiar el aspecto de los enlaces cuando pasas el puntero por encima de ellos. Es lo que se conoce como hover.

La cosa es sencilla pues se trata simplemente de dar un estilo a la etiqueta a y otro que introduzca algún cambio visible para la pseudoclase que lleva el nombre del efecto (a:hover).

Se pueden utilizar prácticamente todas las propiedades CSS, pero si incorporamos las pseudoclases, los selectores de clases y algún que otro truquillo, las posibilidades son casi infinitas, así que seguro que a vosotros se os ocurren muchas más. Se ven muy rápido, así que no os perdáis las últimas. Tras la demo, los códigos utilizados.

1. Este es un enlace plano subrayado sin efecto hover.
2. Este es un enlace que cambia a subrayado.
3. Este es un enlace en el que desaparece el subrayado.
4. Este es un enlace que cambia de color.
5. Este es un enlace que cambia de color y desaparece el subrayado.
6. Este es un enlace con borde discontinuo abajo que cambia a continuo.
7. Este es un enlace con borde continuo abajo que cambia a discontinuo.
8. Este es un enlace sin subrayado que cambia de color.
9. Este es un enlace que cambia su color de fondo.
10. Este es un enlace con borde punteado abajo que cambia a continuo.
11. Este es un enlace que cambia a multicolor.
12. Este es un enlace que aparece con una línea superior.
13. Este es un enlace que aparece subrayado y con una línea superior.
14. Este es un enlace que aparece con un borde superior y otro inferior.
15. Este es un enlace que aparece con un borde que lo rodea.
16. Este es un enlace con cambio de color de texto y fondo.
17. Este es un enlace con cambio de color mediante transición.
18. Este es un enlace con cambio de color y fondo mediante transición.
19. Este es un enlace cuyo estilo cambia a negrita.
20. Este es un enlace que sale con efecto "tachado".
21. Este es un enlace cuyo estilo cambia a cursiva.
22. Este es un enlace con cambio de texto a pequeñas mayúsculas (small-caps).
23. Este es un enlace que incorpora sombras de texto.
24. Este es un enlace que aparece en una caja redondeada con color de fondo.
25. Este es un enlace en el que aparece el destino.
26. Este es un enlace con borde inferior discontinuo y cambios de color.
27. Este es un enlace cuya separación entre caracteres cambia.
28. Este es un enlace el que aparece un icono.
29. Este es un enlace que toma forma de flecha.
30. Este es un enlace que se acerca.
31. Este es un enlace con mensaje emergente¿A qué esperas para ver esto?.

(1) a { color: darkblue; text-decoration:underline; }
(1) a:hover { color: darkblue; }

(2) a { text-decoration: none; }
(2) a:hover { text-decoration: underline; }

(3) a { text-decoration: underline; }
(3) a:hover { text-decoration: none; }

(4) a { text-decoration:underline; }
(4) a:hover { color: #E06C1F; }

(5) a { text-decoration:underline; }
(5) a:hover { text-decoration: none; color: #E06C1F; }

(6) a { text-decoration: none; border-bottom: dashed 1px; }
(6) a:hover { border-bottom: solid 1px; }

(7) a { text-decoration: none; border-bottom: solid 1px; }
(7) a:hover { border-bottom: dashed 1px; }

(8) a { text-decoration: none; }
(8) a:hover { color: #e06c1f; }

(9) a { text-decoration: none; padding: 1px 3px; }
(9) a:hover { background: #ccc; }

(10) a { text-decoration: none; border-bottom: solid 1px; }
(10) a:hover { border-bottom: dotted 1px; }

(10) a { text-decoration: none; border-bottom: dotted 1px; }
(10) a:hover { border-bottom: solid 1px; }

(11) a { text-decoration: none; }
(11) a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); }

(12) a { text-decoration: none; }
(12) a:hover { text-decoration: overline; }

(13) a { text-decoration: none; }
(13) a:hover { text-decoration: overline underline; }

(14) a { text-decoration: none; }
(14) a:hover { border-bottom: solid 1px; border-top: solid 1px; }

(15) a { text-decoration: none; border: solid 1px transparent; padding: 1px; }
(15) a:hover { border: solid 1px; }

(16) a { text-decoration: none; background: #ccc; padding: 1px 3px; }
(16) a:hover { background: #e06c1f; color: white; }

(17) a { text-decoration: underline; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
(17) a:hover { color: #e06c1f; }

(18) a { text-decoration:none; background: #ccc; padding: 1px 3px; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
(18) a:hover { background: #e06c1f; color: white; webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }

(19) a { text-decoration: none; }
(19) a:hover { font-weight: bold; }

(20) a { text-decoration: none; }
(20) a:hover { text-decoration: line-through; }

(21) a { text-decoration: none; }
(21) a:hover { font-style: italic; }

(22) a { text-decoration: none; }
(22) a:hover { font-variant: small-caps; }

(23) a { text-decoration: none; }
(23) a:hover { text-shadow: 2px 2px 2px #aaa; }

(24) a { text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; }
(24) a:hover { background: #ccc; }

(25) a { text-decoration: none; }
(25) a:hover:after { content: " (" attr(href) ") "; }

(26) a { text-decoration: underline; background: #ccc; text-decoration: none; padding: 1px 3px; border-bottom: dashed 1px #777; }
(26) a:hover { background: #e06c1f; color: white; border-bottom: dashed 1px white; }

(27) a { text-decoration: none; }
(27) a:hover { letter-spacing: 1px; }

(28) a { text-decoration: none; }
(28) a:hover:before { content: url("http://img2.blogblog.com/img/icon18_edit_allbkg.gif"); }

(29) a { text-decoration: none; padding: 1px 3px; }
(29) a:hover { background: #ccc; position: relative; font-style: italic; }
(29) a:hover:after { content: " "; position: absolute; height: 0px; width: 0px; border-color: transparent transparent transparent #ccc; border-style: solid; border-width: 15px; }

(30) a { text-decoration: none; padding: 1px 3px; display: inline-block; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1.4s linear; transition: all 1s linear; }
(30) a:hover { background: #ccc; color: white; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4); -webkit-transform: scale(1.5,1.5); -moz-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); -webkit-transition: all .8s linear; -moz-transition: all .8s linear; -ms-transition: all .8s linear; -o-transition: all .8s linear; transition: all .8s linear; }

(31) a { text-decoration: none; position: relative; }
(31) a span { text-decoration: none; width: 100px; height: auto; line-height: 20px; padding: 10px; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.9); border-radius: 5px; pointer-events: none; position: absolute; left: 0; bottom: 200px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
(31) a:hover span { opacity: 0.9; left: 50%; bottom: 10px; color: #000000; }
(31-HTML) Este es un <a href="javascript:void();">enlace con mensaje emergente<span>¿A qué esperas para ver esto?</span></a>.

La idea de esta entrada esta (casi) vilmente copiada de este Dablett.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter