Con “link hover” me refiero al momento en que posicionamos el ratón encima de un hipervínculo. A nivel de experiencia de usuario (UX), conviene que la página haga patente que el ratón se ha posicionado sobre un elemento interactivo y que, por tanto, el usuario puede hacer clic y visitar otra página o esperar algún tipo de respuesta de nuestra página.
Los propios navegadores incorporan funcionamientos por defecto al respecto, siendo el más común el cambio de apariencia del cursor (que deja de ser una flecha para ser una mano con un dedo señalando al link).
En resumen, es esperable que a la hora de diseñar una página web tengamos en cuenta este comportamiento. Así que voy a compartir una lista de ideas creativas para efectos de link hover que he ido encontrando en Internet, en las que me baso cuando tengo que crear este tipo de efectos.
Nota previa: link hover y dispositivos móviles
¡Alerta! ¡¿Estamos hablando del selector :hover?! ¡¿Qué pasa entonces con los dispositivos móviles?!
Sí, ya lo sé. Introducir estilos en pseudoclases puede ser inútil en muchos escenarios, destacando el uso de dispositivos móviles o navegación mediante el teclado. Pero podemos aplicar los estilos correctamente teniendo en cuenta directrices como las de Zellwk:
Estilos en estados hover
Cuando el usuario sitúa su ratón sobre un elemento, poniéndolo en estado hover, ya sabe que está haciendo hover. En consecuencia, el efecto no tiene por qué destacar demasiado.
Estilos en estados focus
El estado focus se activa al hacer clic o utilizar el tabulador sobre un elemento que pueda adquirir este estado. Estos son:
- Links.
- Botones (no en todos los navegadores).
- Elementos de formulario (input, textarea, select, checkbox…).
- Y elementos con el atributo tabindex.
De nuevo, si el usuario ha hecho clic, sabe que lo ha hecho. Es decir, lo que realmente nos preocupa en este caso es que el usuario haya hecho focus en el elemento mediante la navegación con tabulador.
Algunos de los estilos que podemos atribuir al estado focus son el outline, border y box-shadow. A su vez, este es el selector que debería gestionar la animación en la mayoría de las ocasiones.
Estilos en estados active
El estado active se activa cuando el usuario interactúa con un elemento. Es decir, cuando aprieta el botón del ratón para hacer click o la tecla espacio (que no enter) si navega con el teclado. Esto implica que los estado focus y active, en muchas ocasiones, se disparan juntos.
Entonces, ¿cómo aplicar estilos a nuestros links?
Siguiendo el artículo que estamos utilizando como fuente, Zell recomienda que utilicemos el siguiente código para dar feedback en todo escenario posible:
[codepen_embed height="300" default_tab="css,result" slug_hash="ExQYwMN" preview="true" editable="true" user="agarzon48"]See the Pen
Ideas creativas para efectos de link hover - CSS link feedback by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]
Ahora sí: ideas creativas para efectos de link hover
Inicio este artículo basándome en la colección que Harshil Patel compartió en CSS tricks, pero iré actualizando la lista conforme encuentre otros efectos interesantes.
Sliding highlight link hover effect
Este efecto subraya el texto del enlace desde la izquierda, haciendo que cambie el color del texto en el proceso. Su particularidad es que utiliza la propiedad box-shadow, en lugar de un background-color, para poder aplicar una transición.
[codepen_embed height="300" default_tab="css,result" slug_hash="gOXMLLY" preview="true" editable="true" user="css-tricks"]See the Pen
Hover Effect 1 by CSS-Tricks (@css-tricks)
on CodePen.[/codepen_embed]
Text swapping link hover effect
La gracia de este efecto es que nos permite insertar un texto alternativo al enlace mediante la propiedad data-replace. Eso sí, ten en cuenta que el ‘overflow: hidden;’ aplicado al enlace limitará el espacio que tienes por defecto para introducir tu nuevo texto:
[codepen_embed height="300" default_tab="css,result" slug_hash="jOarVmy" preview="true" editable="true" user="css-tricks"]See the Pen
Hover Effect 2 by CSS-Tricks (@css-tricks)
on CodePen.[/codepen_embed]
Right to left color swap link hover effect
Esta animación está mucho más sobrecargada, por lo que puede ser recomendable utilizar la característica prefers-reduced-motion:
[codepen_embed height="300" default_tab="css,result" slug_hash="OJOXWPp" preview="true" editable="true" user="css-tricks"]See the Pen
Hover Effect 5 by CSS-Tricks (@css-tricks)
on CodePen.[/codepen_embed]
Rainbow underline link hover effect
Este es uno de los efectos más agradables, ya que se trata de un subrayado sutil pero colorido. Se basa en la eliminación del background del enlace, que en su estado inicial está tapando el subrayado de color.
[codepen_embed height="300" default_tab="css,result" slug_hash="gOXMgxR" preview="true" editable="true" user="css-tricks"]See the Pen
Hover Effect 6 by CSS-Tricks (@css-tricks)
on CodePen.[/codepen_embed]
Passing underline link hover effect
En este caso se trata de una animación que entra por la parte izquierda del elemento al hacer hover y sale por su parte derecha, provocando un efecto de subrayado orgánico que, además, soporta textos en diferentes líneas:
[codepen_embed height="300" default_tab="css,result" slug_hash="VwMBgZB" preview="true" editable="true" user="Wongjn"]See the Pen
Mouse-Out by Justin Wong (@Wongjn)
on CodePen.[/codepen_embed]