Background Fade

Una capa translúcida tiñe el elemento para indicar que el puntero está encima.

Añade un "Hover State Layer" (también llamado hover state, state layer o hover overlay) en [dónde].
Una capa translúcida y tenue del color del contenido debe aparecer rápidamente sobre el elemento mientras el puntero esté encima, y desvanecerse al salir.
Mantenla tenue para no perder contraste, y usa el mismo enfoque de capa para los estados de foco y de pulsación.

El color del borde aparece o cambia con un fundido al pasar el cursor.

Añade un efecto hover "Border Fade" en [dónde].
El borde debe pasar suavemente de un tono apagado al color de acento mientras el cursor está sobre el elemento: sutil, sin movimiento ni cambio de tamaño.
Mantén el mismo grosor de borde en ambos estados para que nada se desplace 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.

Al pasar el cursor, el fondo relleno se vacía y deja solo el botón con contorno.

Añade un efecto hover "Hollow" (también llamado ghost fill) en [dónde].
El fondo relleno debe desvanecerse hasta dejar solo el contorno, y el color del texto debe cambiar para seguir siendo legible sobre el fondo vacío: suave y rápido.
Mantén el mismo grosor de borde en ambos estados para que el elemento no cambie de tamaño, 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).