Overline Grow

Al pasar el ratón, un subrayado crece desde un lado o desde el centro bajo un enlace.

Añade un efecto hover de subrayado animado (Underline Draw) en [dónde], también llamado animated underline o hover underline animation.
Cuando el puntero esté sobre el enlace, un subrayado debe crecer suavemente de izquierda a derecha bajo el texto y encogerse de nuevo cuando el puntero salga: rápido y sutil.
Evita que el subrayado desplace el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

Una línea entra deslizándose desde el borde inferior o superior hasta su lugar para subrayar o sobrerrayar el elemento.

Añade un efecto hover "Underline Reveal" (también llamado overline reveal o reveal) en [dónde].
Una línea de ancho completo debe subir deslizándose hasta su lugar desde justo debajo del borde inferior mientras el cursor está sobre el elemento, y bajar de nuevo fuera de la vista cuando sale: rápido y suave.
Recorta la línea en el borde para que aparezca deslizándose y no con un fundido ni creciendo, y muestra el mismo efecto con el foco del teclado.

El elemento se agranda rápidamente y vuelve a su tamaño con un rebote elástico.

Añade un efecto hover "Pop" en [dónde].
Cada vez que entre el puntero, el elemento debe hincharse una vez rápidamente y volver a su tamaño normal, como un pequeño rebote elástico.
Reprodúcelo una vez por hover en lugar de mantener el tamaño mayor o repetirlo en bucle, y evita que el diseño de alrededor se desplace.

El elemento se hunde hacia dentro y vuelve, como si se pulsara un botón físico.

Añade un efecto hover "Push" en [dónde].
Cada vez que entre el puntero, el elemento debe encogerse una vez rápidamente y recuperar su tamaño normal con un rebote, como si se pulsara un botón físico.
Reprodúcelo una vez por hover en lugar de repetirlo en bucle, y evita que el diseño de alrededor se desplace.

Al pasar el cursor, un círculo de color crece desde el centro o se contrae hacia él para rellenar el elemento.

Añade un efecto hover "Radial Fill" (también llamado circle expand) en [dónde].
Un círculo del nuevo color debe crecer suavemente desde el centro hasta llenar el elemento, y encogerse de vuelta hacia el centro cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible.
Mantén el círculo recortado dentro de la forma del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.