Rectangle Fill

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.

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.

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.

Un fondo de color entra barriendo desde un borde con un rebote elástico que se pasa un poco.

Añade un efecto hover "Background Bounce Sweep" en [dónde].
Un nuevo color de fondo debe entrar barriendo desde un borde, pasarse un poco del borde opuesto con un rebote elástico y luego asentarse, mientras el color del texto cambia para seguir siendo legible; al salir, vuelve a deslizarse hacia fuera con suavidad.
Mantén el texto por encima del relleno y muestra el mismo efecto con el foco del teclado.

El elemento gira unos pocos grados al pasar el cursor.

Añade un efecto hover "Rotate" en [dónde].
El elemento debe girar ligeramente en el sentido de las agujas del reloj mientras el puntero esté encima y volver al salir: suave y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Las esquinas del elemento se redondean con suavidad al pasar el cursor.

Añade un efecto hover "Round Corners" en [dónde].
Las esquinas rectas del elemento deben redondearse con suavidad mientras el cursor está encima y volver a ser rectas cuando sale: suave y rápido.
Mantén el tamaño del elemento sin cambios y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una franja diagonal de luz recorre el elemento de un lado a otro.

Añade un efecto hover "Shine Sweep" (también llamado sheen, shiny button, shine on hover, glint, shimmer o shimmer button) en [dónde].
Una franja diagonal de luz suave debe recorrer el elemento de izquierda a derecha y repetirse con una breve pausa mientras el cursor sigue encima.
Mantén la franja recortada dentro del elemento, detenla cuando el cursor salga y no la reproduzcas si el usuario prefiere movimiento reducido (prefers-reduced-motion).