4 formas de animar el color de un enlace de texto al pasar el ratón

Creemos un efecto CSS puro que cambia el color de un enlace de texto al pasar el mouse… pero deslicemos ese nuevo color en lugar de simplemente intercambiar colores.

Hay cuatro técnicas diferentes que podemos utilizar para hacer esto. Veámoslos teniendo en cuenta aspectos importantes, como la accesibilidad, el rendimiento y la compatibilidad del navegador.

¡Empecemos!

Técnica 1: uso de clip de fondo: texto

Al momento de escribir este artículo, la background-clip: textpropiedad es una característica experimental y no es compatible con Internet Explorer 11 y versiones anteriores.

Esta técnica implica la creación de texto resaltado con un gradiente de parada brusca. El marcado consta de un único aelemento de enlace HTML ( ) para crear un hipervínculo:

a href="#"Link Hover/a

Podemos comenzar a agregar estilos al hipervínculo. El uso overflow: hiddenrecortará cualquier contenido fuera del hipervínculo durante la transición del cursor:

a {  position: relative;  display: inline-block;  font-size: 2em;  font-weight: 800;  color: royalblue;  overflow: hidden;}

Necesitaremos usar un degradado lineal con una parada brusca del 50% del color inicial que queremos que tenga el enlace, así como del color al que cambiará:

a {  /* Same as before */  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);}

Usemos background-clippara recortar el degradado y el textvalor para mostrar el texto. También usaremos las propiedades background-sizey background-positionpara que aparezca el color inicial:

a {  /* Same as before */  background-clip: text;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-size: 200% 100%;  background-position: 100%;}

Finalmente, agregamos la transitionpropiedad CSS y :hoverla pseudoclase CSS al hipervínculo. Para que el enlace se complete de izquierda a derecha al pasar el mouse, use la background-positionpropiedad:

a {  /* Same as before */  transition: background-position 275ms ease;}a:hover {  background-position: 0 100%;}

Si bien esta técnica logra el efecto de desplazamiento, Safari y Chrome recortarán las decoraciones y sombras del texto, lo que significa que no se mostrarán. Aplicar estilos de texto, como un subrayado, con la propiedad CSS de decoración de texto no funcionará. Quizás considere utilizar otros enfoques al crear subrayados.

Técnica 2: Usar ancho/alto

Esto funciona usando un atributo de datos que contiene el mismo texto que el de la aetiqueta y configurando width(rellenar el texto de izquierda a derecha o de derecha a izquierda) o height(rellenar el texto de arriba a abajo o de abajo). -to-top), de 0% a 100% al pasar el mouse.

Aquí está el marcado:

a href="#" data-content="Link Hover"Link Hover/a

El CSS es similar a la técnica anterior menos las propiedades CSS de fondo. La text-decorationpropiedad funcionará aquí:

a {  position: relative;  display: inline-block;  font-size: 2em;  color: royalblue;  font-weight: 800;  text-decoration: underline;  overflow: hidden;}

Aquí es cuando necesitamos usar el contenido del data-contentatributo. Se colocará encima del contenido de la aetiqueta. Podemos usar el pequeño truco de copiar el texto en el atributo de datos y mostrarlo a través de la función en la propiedad de contenido del pseudoelemento attr()del elemento.::before

a::before {  position: absolute;  content: attr(data-content); /* Prints the value of the attribute */  top: 0;  left: 0;  color: midnightblue;  text-decoration: underline;  overflow: hidden;  transition: width 275ms ease;}

Para evitar que el texto pase a la siguiente línea, white-space: nowrapse aplicará. Para cambiar el color de relleno del enlace, establezca el valor de la propiedad CSS de color usando el ::beforepseudoelemento y comenzando widthen 0:

a::before {  /* Same as before */  width: 0;  white-space: nowrap;}

Aumente el ancho al 100% del ::beforepseudoelemento para completar el efecto de texto al pasar el mouse:

a:hover::before {  width: 100%;}

Si bien esta técnica funciona, el uso de las propiedades widtho heightno producirá una transición CSS eficaz. Es mejor utilizar las propiedades transformo opacitypara lograr una transición suave de 60 fps.

El uso de la text-decorationpropiedad CSS puede permitir que aparezcan diferentes estilos de subrayado en la transición CSS. Creé una demostración que muestra esto usando la siguiente técnica: la clip-pathpropiedad CSS.

Técnica 3: uso de ruta de clip

Para esta técnica, usaremos la clip-pathpropiedad CSS con forma de polígono. El polígono tendrá cuatro vértices, y dos de ellos se expandirán hacia la derecha al pasar el mouse:

El marcado es el mismo que la técnica anterior. Usaremos un ::beforepseudoelemento nuevamente, pero el CSS es diferente:

a::before {  position: absolute;  content: attr(data-content);  color: midnightblue;  text-decoration: underline;  clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);  transition: clip-path 275ms ease;}

A diferencia de las técnicas anteriores, text-decoration: underlinese debe declarar ::before pseudo-elementel color para llenar el subrayado al pasar el mouse.

Ahora veamos el CSS de la clip-pathtécnica:

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

Los vértices del polígono de la clip-pathpropiedad se establecen en porcentajes para definir las coordenadas según el orden escrito:

• 0 0= arriba a la izquierda
• 0 0= arriba a la derecha
• 100% 0= abajo a la derecha
• 0 100%= abajo a la izquierda

La dirección del efecto de relleno se puede cambiar modificando las coordenadas. Ahora que tenemos una idea para las coordenadas, podemos hacer que el polígono se expanda hacia la derecha al pasar el mouse:

a:hover::before {  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}

Esta técnica funciona bastante bien, pero tenga en cuenta que la compatibilidad con la clip-pathpropiedad varía según el navegador. Crear una transición CSS con clip-pathes una mejor alternativa que usar la técnica width/ ; heightSin embargo, sí afecta la pintura del navegador.

Técnica 4: uso de transformación

El marcado de esta técnica utiliza un método de enmascaramiento con un spanelemento. Dado que usaremos contenido duplicado en un elemento separado, lo usaremos aria-hidden="true"para mejorar la accesibilidad, lo que lo ocultará de los lectores de pantalla para que el contenido no se lea dos veces:

a href="#"span data-content="Link Hover" aria-hidden="true"/spanLink Hover/a

El CSS del spanelemento contiene una transición que comenzará desde la izquierda:

span {  position: absolute;  top: 0;  left: 0;  overflow: hidden;  transform: translateX(-100%);  transition: transform 275ms ease;}

A continuación, debemos hacer que spanse deslice hacia la derecha así:

Para hacer esto, usaremos la translateX()función CSS y la estableceremos en 0:

a:hover span {  transform: translateX(0);}

Luego, usaremos el ::beforepseudoelemento para span, nuevamente usando el data-contentatributo que hicimos antes. Estableceremos la posición trasladándola 100% a lo largo del eje x.

span::before {   display: inline-block;  content: attr(data-content);  color: midnightblue;  transform: translateX(100%);  transition: transform 275ms ease;  text-decoration: underline;}

Al igual que el spanelemento, la posición del ::beforepseudoelemento también se establecerá en translateX(0):

a:hover span::before {  transform: translateX(0);}

Si bien esta técnica es la más compatible con todos los navegadores de todas, requiere más marcado y CSS para llegar allí. Dicho esto, usar la propiedad CSS de transformación es excelente para el rendimiento, ya que no activa repintados y, por lo tanto, produce transiciones CSS suaves a 60 fps.

¡Ahí lo tenemos!

Simplemente analizamos cuatro técnicas diferentes para lograr el mismo efecto. Aunque cada uno tiene sus pros y sus contras, puedes ver que es totalmente posible deslizar un cambio de color en el texto. Es un pequeño efecto que hace que los enlaces parezcan un poco más interactivos.