Hollow

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.

Al pasar el cursor, aparece una línea de borde interior dentro del contorno del elemento.

Añade un efecto hover "Trim" en [dónde].
Una línea fina debe aparecer con un fundido justo dentro del borde del elemento mientras el cursor está encima, y desvanecerse cuando sale: sutil, sin movimiento.
Mantén la línea dentro del elemento para que su tamaño no cambie y muestra el mismo efecto con el foco del teclado.

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 borde degradado se anima alrededor del elemento y se expande cuando el puntero pasa por encima.

Añade un efecto "Hover Border Gradient" en [dónde].
Un brillo degradado corto debe reposar sobre una parte del borde; mientras el puntero esté sobre el elemento, debe recorrer el borde a ritmo constante mientras todo el borde se ilumina con un resplandor suave.
Anima el borde solo durante el hover y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Al pasar el cursor, aparece o se intensifica una sombra suave bajo el elemento que sugiere elevación.

Añade un efecto "Hover Shadow" (también llamado drop shadow on hover o elevation on hover) en [dónde].
Una sombra suave bajo el elemento debe intensificarse y extenderse mientras el puntero esté encima para que parezca elevado, y volver a desvanecerse al salir, sin que el elemento se mueva de su sitio.
Mantén la sombra lo bastante sutil para que funcione en temas claros y oscuros, y muestra el mismo efecto con el foco del teclado.

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.