👨‍💻 Cómo crear 7 efectos CSS "hover" distintos desde cero

En el tutorial de hoy, vamos a crear 7 diferentes efectos CSS para el estado "hover" (cuando sitúas el ratón o el dedo sobre un elemento cliclable). Mientras vemos esto aprenderemos un montón de cosas, por ejemplo, cómo animar iconos basados en fuentes, animar bordes y trazados curvilíneos en formato SVG ("paths"). Podrás aplicar estos efectos "hover" CSS en todo tipo de situaciones. ¡Vamos a zambullirnos!

Sólo para darte una idea de lo que vas a aprender a lo largo de este tutorial, echa un vistazo a una de las demostraciones que vamos a crear:

Empecemos con éste, nos vemos en el primer paso…

1. Efecto hover CSS que revela un icono

En este primer ejemplo, exploraremos el ejemplo que acabas de ver: un efecto hover en el que el texto es reemplazado por un icono mediante un desplazamiento animado.

Comienza con el código de marcado de página

Empezaremos con una sencilla lista desordenada que representa un menú de página típico. Cada enlace de menú incluirá dos elementos span. El primero contendrá el texto ancla, mientras que el segundo contendrá un icono de Font Awesome:

<ul class="menu">
  <li>
    <a href="#0">
      <span>About</span>
      <span>
        <i class="fas fa-address-card" aria-hidden="true"></i>
      </span>
    </a>
  </li>
  <li>
    <a href="#0">
      <span>Projects</span>
      <span>
        <i class="fas fa-tasks" aria-hidden="true"></i>    
      </span>
    </a>
  </li>
  ...
</ul>

Especificar los estilos

La lista estará constituida por un contenedor flexible cuyo contenido está centrado horizontalmente:

.menu {
  display: flex;
  justify-content: center;
}

Nota: Este estilo base se añadirá a todas las demostraciones que vamos a construir, por lo que no lo volveremos a explicar. La demo también tiene algunos estilos con fines estéticos que reutilizaremos cada vez (como un fondo oscuro, etc.) y que puedes copiar desde la demostración en CodePen.

El primer span de cada elemento tendrá un poco de relleno (padding) a su alrededor:

.menu a span:first-child {
  display: inline-block;
  padding: 10px;
}

A continuación, el segundo span estará posicionado de forma absoluta y oculto por defecto. Además, su icono estará centrado tanto horizontal como verticalmente:

.menu a {
  display: block;
  position: relative;
  overflow: hidden;
}

.menu a span:last-child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
}

Cada vez que pasemos el cursor sobre un enlace, su texto desaparecerá. Por otro lado, en ese momento el icono asociado se hará visible:

.menu a span {
  transition: transform 0.2s ease-out;
}

.menu a:hover span:first-child {
  transform: translateY(100%);
}

.menu a:hover span:last-child {
  transform: none;
}

Afortunadamente, existe la opción de modificar la dirección de las animaciones deslizantes según nuestras necesidades. Por defecto, durante la animación del desplazamiento, el icono aparecerá de arriba a abajo, mientras que el texto se moverá hacia la parte inferior. Para cambiar ese comportamiento, tenemos que pasar el atributo data-animation a la lista de destino. Los posibles valores son to-top, to-right,y to-left.

Los estilos correspondientes se muestran a continuación:

.menu[data-animation="to-top"] a span:last-child {
  transform: translateY(100%);
}

.menu[data-animation="to-top"] a:hover span:first-child {
  transform: translateY(-100%);
}

.menu[data-animation="to-right"] a span:last-child {
  transform: translateX(-100%);
}

.menu[data-animation="to-right"] a:hover span:first-child {
  transform: translateX(100%);
}

.menu[data-animation="to-left"] a span:last-child {
  transform: translateX(100%);
}

.menu[data-animation="to-left"] a:hover span:first-child {
  transform: translateX(-100%);
}

Aquí está la demostración completa de CodePen que resume los casos antes mencionados:

2. Efecto hover CSS de desplazamiento revelador

En este segundo ejemplo continuaremos con otro efecto de desplazamiento donde el texto es reemplazado por un impresionante icono basado en una fuente. Pero, esta vez, el reemplazo ocurrirá en segundo plano y no será visible para nosotros, gracias a un "deslizamiento" que ocurre en primer plano:

Especifica el código de marcado de página

Como siempre, comenzaremos con una lista sin ordenar que contendrá los enlaces de página. Sin embargo, en este caso, cada uno de nuestros enlaces tendrá un atributo data-icon. El valor de este atributo coincidirá con la respresentación Unicode de un icono de Font Awesome:

<ul class="menu">
  <li>
    <a href="#0" data-icon="&#xf2bb;">
      About
    </a>
  </li>
  <li>
    <a href="#0" data-icon="&#xf0ae;">
      Projects
    </a>
  </li>
  ...
</ul>

Especifica los estilos

A continuación, definiremos los pseudoelementos ::before y ::after de todos los enlaces.

• El pseudo-elemento ::before se colocará en el centro del enlace, aunque inicialmente será invisible.
• El pseudo-elemento ::after cubrirá las dimensiones completas del enlace, pero también estará oculto de forma predeterminada. Su contenido contendrá un icono de Font Awesome especificado en el relevante atributo data-icon:

:root {
  ...
  --text-color: #aaaebc;
  --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
}

.menu a {
  position: relative;
  overflow: hidden;
}

.menu a::before,
.menu a::after {
  position: absolute;
  left: 0;
  width: 100%;
}

.menu a::before {
  content: ’’;
  top: 50%;
  transform: translate(-101%, -50%);
  height: 50%;
  z-index: 1;
  background: var(--text-color);
}

.menu a::after {
  content: attr(data-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-color);
  opacity: 0;
}

Cada vez que pasemos el cursor sobre un enlace, primero aparecerá rápidamente el pseudo-elemento ::before. Luego, se desplazará hacia la derecha y aparecerá el icono. Durante ese tiempo, el color del texto de ancla se establecerá en transparente.

Para lograr esta precisa sincronización, tenemos que personalizar la velocidad de las transiciones. Por ejemplo, añadiremos retrasos tanto a los enlaces, como a su pseudo-elemento ::after:

/*CUSTOM VARIABLES HERE*/

.menu a {
  transition: color 0s 0.25s var(--timing-function);
}

.menu a::before {
  transition: transform 0.5s var(--timing-function);
}

.menu a::after {
  transition: opacity 0s 0.25s var(--timing-function);
}

.menu a:hover {
  color: transparent;
}

.menu a:hover::before {
  transform: translate(101%, -50%);
}

.menu a:hover::after {
  opacity: 1;
}

Si prefieres una animación en sentido inverso, sencillamente agrega el atributo data-animation="to-left" a la correspondiente lista:

Aquí está la demostración de Codepen que cubre ambos casos:

3. Efecto de desplazamiento CSS con subrayado animado

En nuestro tercer ejemplo veremos un habitual efecto de deslizamiento en donde se revela un subrayado mediante un desplazamiento animado:

Especificar el código de marcado de página

Comenzaremos con una lista desordenada que almacenará los enlaces de página:

<ul class="menu">
  <li>
    <a href="#0">
      About
    </a>
  </li>
  <li>
    <a href="#0">
      Projects
    </a>
  </li>
  ...
</ul>

Especificar los estilos

A continuación, definiremos el pseudo-elemento ::before para todos los enlaces. Lo colocaremos en la parte inferior de su contenedor y le asignaremos translate: scaleX(0), por lo que inicialmente estará oculto.

Además, le aplicaremos transform-origin: left porque queremos que la animación comience de izquierda a derecha:

.menu a {
  position: relative;
}

.menu a::before {
  content: ’’;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #b47dcd, #e878a2, #eb85ab);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}

Cada vez que pasemos el cursor sobre un enlace, aparecerá su pseudo-elemento:

.menu a:hover::before {
  transform: scaleX(1);
}

De forma similar al ejemplo anterior, tenemos la opción de cambiar la dirección de la animación del deslizamiento. La línea aparecerá de izquierda a derecha de forma predeterminada, pero para cambiar ese comportamiento, tenemos que pasar el atributo data-animation a la lista de destino. Los valores posibles son to-left y center.

Los estilos correspondientes son los siguientes:

.menu[data-animation="to-left"] a::before {
  transform-origin: right;
}

.menu[data-animation="center"] a::before {
  transform-origin: center;
}

¡Un extra!

Podemos ir un paso más allá y cambiar el valor de la propiedad transform-origin del pseudo-elemento dependiendo de su estado. Esto hace que el subrayado aparezca por un lado y desaparezca por el otro:

Aquí están las reglas que implementan esta funcionalidad:

.menu[data-animation="bonus"] a::before {
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}

.menu[data-animation="bonus"] a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);
}

Aquí tienes la demostración de CodePen para los escenarios que discutimos:

4. Animación CSS de efecto hover con múltiples líneas

Continuando, en este cuarto ejemplo explicaremos un efecto de desplazamiento donde son reveladas varias líneas secuencialmente. Lo atractivo de esta técnica es que nos da la impresión de que el borde del elemento flotado está siendo dibujado. ¡Esto es genial!

Nota: este efecto también se puede lograr con SVG, y veremos algo similar en una demostración posterior.

Especificar el código de marcado de página

Una vez más, nuestro marcado constará de una lista desordenada. Cada uno de los enlaces de menú contendrá cuatro elementos span vacíos:

<ul class="menu">
  <li>
    <a href="#0">
      About
      <span class="border border-top"></span>
      <span class="border border-right"></span>
      <span class="border border-bottom"></span>
      <span class="border border-left"></span>
    </a>
  </li>
  ...
</ul>

Especificar los estilos

Los elementos span estarán posicionados de forma absoluta y ocultos de forma predeterminada. Sin embargo, sus propiedades position y transform-origen serán diferentes:

.menu .border {
  position: absolute;
  left: 0;
  background: currentColor;
}

.menu .border-top,
.menu .border-bottom {
  width: 100%;
  height: 1px;
  transform: scaleX(0);
}

.menu .border-left,
.menu .border-right {
  width: 1px;
  height: 100%;
  transform: scaleY(0);
}

.menu .border-top,
.menu .border-left,
.menu .border-right {
  top: 0;
}

.menu .border-bottom {
  bottom: 0;
  transform-origin: bottom right;
}

.menu .border-top {
  transform-origin: top left;
}

.menu .border-left {
  transform-origin: bottom left;
}

.menu .border-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}

A medida que pasamos el ratón sobre un enlace, sus elementos span se harán visibles secuencialmente, tras una rotación en el sentido de las agujas del reloj. Para conseguirlo, controlaremos cuándo se hacen visibles el segundo, el tercero y el cuarto elemento span:

:root {
  ...
  --transition-duration: 0.2s;
  --transition-delay: 0.2s;
}

.menu .border {
  transition: transform var(--transition-duration) ease-in-out;
}

.menu a:hover .border-top,
.menu a:hover .border-bottom {
  transform: scaleX(1);
}

.menu a:hover .border-left,
.menu a:hover .border-right {
  transform: scaleY(1);
}

.menu a:hover .border-right {
  transition-delay: var(--transition-delay);
}

.menu a:hover .border-bottom {
  transition-delay: calc(var(--transition-delay) * 2);
}

.menu a:hover .border-left {
  transition-delay: calc(var(--transition-delay) * 3);
}

Al modificar el valor de la propiedad transform-origin y cancelar los retardos de nuestros elementos, podemos generar fácilmente otro efecto agradable:

Para incorporar este efecto en nuestro menú, tenemos que anexarle el atributo data-animation="diagonal". Esto dará como resultado los siguientes estilos CSS:

.menu[data-animation="diagonal"] .border-left {
  transform-origin: top left;
}

.menu[data-animation="diagonal"] .border-right,
.menu[data-animation="diagonal"] .border-bottom {
  transform-origin: bottom right;
}

.menu[data-animation="diagonal"] a:hover [class^=border]{
  transition-delay: 0s;
}

Echa un vistazo a la demo en CodePen que nos da esos efectos:

5. Efecto hover con un círculo SVG animado

En este quinto ejemplo, explicaremos paso a paso un efecto de desplazamiento donde es animada un un trazado SVG, rodeando nuestro vínculo. La técnica que vamos a usar no es algo nuevo; en realidad, Jake Archibald ya escribió sobre ello hace algunos años.

Especificar el código de marcado de página

Una vez más, comenzaremos con una lista desordenada, pero esta vez incluiremos un SVG anidado dentro de cada enlace:

<ul class="menu">
  <li>
    <a href="#0">
      About
      <svg preserveAspectRatio="none" viewBox="0 0 546.714 178.143">
      <path d="M546.214 89.072c0 48.917-122.162 88.571-272.857 88.
      571C122.662 177.643.5 137.988.5 89.072.5 40.155 122.662.5 273.357.5c150.
      695 0 272.857 39.655 272.857 88.572z"/>
      </svg>
    </a>
  </li>
  ...
</ul>

El SVG será una elipse representada a través del elemento path. Le daremos preserveAspectRatio="ninguno" porque, como veremos en un momento, debe cubrir las dimensiones completas del elemento padre, incluso aunque esté estirado.

Especificar los estilos

El SVG estará posicionado de forma absoluta y centrado dentro de su contenedor. Además, como mencionamos anteriormente, será lo suficientemente grande como para cubrir el texto ancla:

.menu a {
  position: relative;
}

.menu a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  z-index: -1;
}

El elemento path tendrá un trazo y su color de relleno será transparente:

.menu a svg path {
  fill: transparent;
  stroke-width: 5px;
  stroke: currentColor;
}

Para animar el trazado de la trayectoria, necesitaremos dos propiedades adicionales. Concretamente, las propiedades stroke-dasharray y stroke-dashoffset.

La propiedad stroke-dasharray es responsable de crear guiones entre espacios huecos en nuestro trazo. Por ejemplo, si establecemos stroke-dasharray: 50 en el trazado, tendrá el siguiente aspecto:

La propiedad stroke-dashoffset es responsable de cambiar la posición (desfase) de esos guiones.

Así que aquí está el truco:

• En primer lugar, el valor de la propiedad stroke-dasharray debe coincidir con la longitud del trazo de la trayectoria. En lugar de adivinarlo, JavaScript proporciona una práctica manera para conseguirlo mediante el método getTotalLength().
• A continuación, asignaremos el valor resultante (o su valor negativo para un efecto invertido) a la propiedad stroke-dashoffset. Esta sencilla combinación ocultará el SVG.
• A continuación, cada vez que pasemos el cursor sobre un vínculo, ejecutaremos una animación que cambiará el valor de la propiedad stroke-dashoffset a 0. Como resultado de esto, el trazado será gradualmente "dibujado".

Teniendo en cuenta todo lo anterior, primero vamos a recuperar la longitud del trazado (sólo para la primera trayectoria) mediante JavaScript:

document.querySelector("li:nth-child(1) path").getTotalLength();
//1210.709716796875;
// you might see slightly different values depending on your browser

A continuación, asignaremos este valor a las correspondientes propiedades:

.menu a svg path {
  stroke-dasharray: 1210.709716796875;
  stroke-dashoffset: -1210.709716796875; /*or the positive one*/
  transition: stroke-dashoffset .5s cubic-bezier(.29,.68,.74,1.02);
}

.menu a:hover svg path {
  stroke-dashoffset: 0;
}

Por último, como mejora, en lugar de crear directamente el código de los valores stroke-dasharray y stroke-dashoffset, podríamos especificarlos dinámicamente usando JavaScript (¡intenta hacerlo tú mismo!).

Aquí está la demostración final, que nos da un refrescante efecto hover que parece trazado sobre una pizarra:

6. Efecto hover con una línea SVG ondulada

Ahora que conocemos los principios básicos que rigen la animación de trayectorias SVG, echemos un rápido vistazo a otros dos ejemplos muy similares. En ambos, no habrá ninguna necesidad de estirar los SVGs, por lo que no haremos uso del atributo preserveAspectRatio="none".

El primero revelará un subrayado ondulado.

Aquí está la demostración:

7. Efecto hover con una flecha SVG apuntando

En el tercer ejemplo con un SVG se revelará un icono Iconmonstr (una flecha apuntando).

Aquí está la demostración para que puedas deducirlo por ti mismo:

Conclusión

¡Con esto concluimos un nuevo tutorial, amigos! Ha sido un viaje un poco largo, pero espero que lo hayas disfrutado y hayas aprendido algunas cosas nuevas a incluir en tu kit de herramientas para el front-end.

Por último, pero no menos importante, he añadido todas las demostraciones de este tutorial en una colección de CodePen. ¡No olvides visitarlo y darle un poco de amor!

Me encantaría ver tus efectos favoritos con CSS. Da igual si provienen de CodePen, de un sitio web inspirador o de cualquier otro lugar. No olvides compartirlos con nosotros en la sección de comentarios.

Como siempre, ¡muchas gracias por leernos!

Más tutoriales de efectos hover mediante CSS y JS

Aprende a crear efectos hover CSS aún más interesantes con estos tutoriales de Tuts+:

Fuentes.

https://webdesign.tutsplus.com/es/tutorials/how-to-create-different-css-hover-effects-from-scratch--cms-34222