Background Bounce Sweep

Un fondo de color recorre el elemento desde un borde al pasar el cursor.

Añade un efecto hover "Background Sweep" (también llamado background fill o slide fill) en [dónde].
Un nuevo color de fondo debe recorrer el elemento del borde izquierdo al derecho, suave y rápido, sin rebote, y retirarse igual cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible.
Mantén el relleno recortado dentro de la forma del elemento y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, un rectángulo se expande o se contrae dentro del elemento para cambiar su fondo.

Añade un efecto hover "Rectangle Fill" en [dónde].
El nuevo color de fondo debe cerrarse desde los cuatro bordes a medida que un rectángulo interior se encoge hacia el centro, y volver a abrirse cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el texto por encima del relleno y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el fondo se abre o se cierra como unas persianas desde el centro o desde los bordes.

Añade un efecto hover "Shutter Fill" (también llamado shutter) en [dónde].
El nuevo color de fondo debe abrirse desde una línea vertical en el centro hacia ambos lados, como unas persianas, y cerrarse de nuevo hacia el centro cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el relleno recortado dentro del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.

El color de fondo y el del texto se funden hacia un nuevo color al pasar el cursor.

Añade un efecto hover "Background Fade" (también llamado color fade) en [dónde].
Los colores del fondo y del texto deben fundirse suavemente hacia nuevos colores mientras el cursor está sobre el elemento, y volver al salir: tranquilo, sin movimiento.
Mantén suficiente contraste entre texto y fondo en ambos estados y muestra el mismo efecto con el foco del teclado.

El elemento sube y luego se balancea arriba y abajo sin parar mientras está bajo el cursor.

Añade un efecto hover "Bob" (también llamado hang) en [dónde].
El elemento debe subir un poco y luego seguir balanceándose suavemente arriba y abajo mientras el cursor siga encima, y bajar de nuevo cuando el cursor salga: lento y suave.
Repite el balanceo solo mientras esté bajo el cursor y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).