Hover

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 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.

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.

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).

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.

Anillos de borde concéntricos se expanden hacia fuera o se contraen hacia dentro desde el elemento al pasar el cursor.

Añade un efecto hover "Border Ripple" en [dónde].
Cuando entra el cursor, un par de anillos de borde deben expandirse desde el elemento uno tras otro y desvanecerse: rápido y ligero, como una onda en el agua.
Reprodúcelo una vez por hover en lugar de repetirlo en bucle y no dejes que los anillos desplacen el diseño de alrededor.

El elemento cambia de escala con un rebote elástico que se pasa un poco al empezar o terminar el hover.

Añade un efecto hover "Bounce Scale" (también llamado bounce in / out) en [dónde].
El elemento debe agrandarse un poco con un rebote elástico visible, pasándose brevemente de su tamaño final antes de asentarse, y volver con el mismo rebote cuando el cursor sale.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Un fondo resaltado se desliza entre las tarjetas de una cuadrícula para seguir a la que está bajo el cursor.

Añade un "Card Hover Effect" (también llamado sliding highlight card grid) en [dónde].
Un fondo resaltado suave debe aparecer detrás de la tarjeta bajo el cursor y deslizarse con fluidez hasta la siguiente tarjeta a la que se mueva el cursor, desvaneciéndose cuando el cursor sale de la cuadrícula.
Haz que el foco del teclado mueva el resaltado de la misma forma y evita que las propias tarjetas se desplacen.

Una luz radial suave sigue al cursor por la superficie de la tarjeta y revela el fondo que hay debajo.

Añade un efecto "Card Spotlight" (también llamado spotlight hover, pointer glow, mouse-following glow o radial gradient hover) en [dónde].
Un resplandor radial suave y tenue debe seguir al cursor por la superficie de la tarjeta, apareciendo con un fundido cuando el cursor entra y desvaneciéndose cuando sale.
Mantén el resplandor detrás del contenido para que el texto siga legible y, en dispositivos táctiles, deja la tarjeta sin iluminar.

Una esquina del elemento se dobla hacia arriba como una página que se pasa al pasar el cursor.

Añade un efecto hover "Curl" (también llamado page curl) en [dónde].
Una esquina del elemento debe doblarse suavemente como una página al pasarla, mostrando el reverso del pliegue, y volver a quedar plana cuando el cursor sale.
Mantén el pliegue pequeño para que no tape contenido importante y muestra el mismo efecto con el foco del teclado.

Una capa se desliza desde el lado por el que entró el cursor y sale hacia el lado por el que se va.

Añade un efecto "Direction Aware Hover" (también llamado direction-aware overlay) en [dónde].
Una capa superpuesta debe deslizarse desde el lado por el que entró el cursor y salir hacia el lado por el que se va: rápido y suave.
Calcula el lado a partir de la posición del cursor al entrar y al salir y, con toque o foco del teclado, usa una dirección por defecto.

Los iconos de una fila crecen suavemente a medida que se acerca el cursor, como el Dock de macOS.

Añade un efecto "Dock Magnification" (también llamado dock) en [dónde].
Los iconos de la fila deben crecer suavemente a medida que se acerca el cursor, con el más cercano como el más grande y sus vecinos algo agrandados, y volver todos a su tamaño normal cuando el cursor sale.
Haz que los iconos crezcan hacia arriba desde una línea base fija y que todos sigan siendo usables a su tamaño normal con toque y teclado.

El elemento sube unos píxeles al pasar el cursor, como si flotara.

Añade un efecto hover "Float" (también llamado lift o raise) en [dónde].
El elemento debe subir un poco y quedarse elevado mientras el cursor está encima, y volver a su sitio cuando sale: suave y delicado, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

Las tarjetas vecinas se desenfocan y oscurecen mientras la tarjeta bajo el cursor se mantiene nítida.

Añade un efecto "Focus Cards" (también llamado blur siblings on hover, hover focus blur o card hover effect) en [dónde].
Mientras el cursor esté sobre una tarjeta, las demás deben desenfocarse, oscurecerse y encogerse un poco mientras la tarjeta bajo el cursor sigue nítida, todo con un fundido suave que se invierte cuando el cursor sale.
Aplica el mismo enfoque con el foco del teclado y mantén todas las tarjetas nítidas y legibles cuando no hay ninguna bajo el cursor.

Aparece un halo de luz de color alrededor del elemento al pasar el cursor.

Añade un efecto hover "Glow" (también llamado neon glow) en [dónde].
Un halo de color suave debe aparecer con un fundido alrededor del elemento mientras el cursor está encima y desvanecerse cuando sale: delicado, sin movimiento.
Evita que el halo afecte al diseño y muestra el mismo efecto con el foco del teclado.

El elemento se agranda ligeramente y con suavidad cuando el cursor está encima.

Añade un efecto hover "Grow" (también llamado scale up) en [dónde].
El elemento debe agrandarse ligeramente y con suavidad mientras el cursor está encima, y volver a su tamaño cuando sale: rápido y sutil.
Evita que el diseño de alrededor se desplace 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.

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.

Al pasar el cursor, un icono cae fuera de la vista y vuelve desde arriba.

Añade un efecto hover "Icon Drop" en [dónde].
El icono dentro del elemento debe caer hacia abajo hasta salir de la vista y luego volver a su lugar desde arriba: rápido, con un aterrizaje suave.
Reprodúcelo una vez cada vez que entre el puntero, sin bucle, y no cambies el texto ni el tamaño del botón.

Un icono se aleja flotando del botón y se desvanece mientras entra otro nuevo.

Añade un efecto hover "Icon Float Away" en [dónde].
El icono actual debe subir flotando y desvanecerse mientras un icono nuevo sube desde abajo hasta ocupar su lugar, con suavidad, y el cambio debe invertirse cuando el puntero salga.
Mantén fijo el tamaño del botón durante el cambio y muestra el mismo efecto con el foco del teclado.

Un icono dentro de un botón gira sobre sí mismo al pasar el cursor por el botón.

Añade un efecto hover "Icon Spin" en [dónde].
El icono dentro del elemento debe dar una vuelta completa con suavidad cuando entre el puntero, y girar de vuelta cuando salga.
Gira solo el icono, no el botón entero, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el texto del botón sale deslizándose y entran una flecha y un relleno que se expande.

Añade un efecto "Interactive Hover Button" en [dónde].
El pequeño punto junto al texto debe expandirse hasta llenar el botón mientras el texto se desliza hacia un lado y se desvanece, y el texto con una flecha entra deslizándose sobre el nuevo relleno: suave y rápido.
Mantén fijo el tamaño del botón y el texto legible en todo momento, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una flecha o el propio elemento se desliza un poco hacia delante o hacia atrás.

Añade un efecto hover "Nudge Forward / Backward" (también llamado arrow nudge) en [dónde].
La flecha debe deslizarse un poco en la dirección a la que apunta mientras el puntero esté sobre el elemento, y volver al salir: rápido y corto.
Mueve solo la flecha, sin desplazar el texto ni el diseño, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, un contorno crece hacia fuera desde el elemento o se contrae hacia él.

Añade un efecto hover "Outline Expand" en [dónde].
Un contorno debe empezar pegado al borde del elemento y moverse hacia fuera hasta dejar un pequeño espacio alrededor, quedarse ahí durante el hover y volver a cerrarse cuando salga el puntero: suave y rápido.
Dibuja el contorno de forma que no cambie el tamaño del elemento ni empuje el contenido cercano, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, una línea crece sobre el texto desde la izquierda, el centro o la derecha.

Añade un efecto hover "Overline Grow" en [dónde].
Una línea sobre el texto debe crecer desde el centro hacia ambos lados mientras el puntero esté encima, y encogerse de vuelta hacia el centro al salir: rápido y suave.
Reserva espacio para la línea para que el texto no se mueva, 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.

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.

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).

El elemento se reduce ligeramente y con suavidad cuando el cursor está encima.

Añade un efecto hover "Shrink" (también llamado scale down) en [dónde].
El elemento debe reducirse ligeramente y con suavidad mientras el cursor está encima, y volver a su tamaño cuando sale: rápido y sutil.
Evita que el diseño de alrededor se desplace 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.

Al pasar el cursor, el elemento baja unos píxeles, como si se hundiera en la página.

Añade un efecto hover "Sink" en [dónde].
El elemento debe bajar un poco y quedarse ahí mientras el cursor está encima, como si se hundiera en la página, y volver a subir cuando sale: suave, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

El elemento se inclina de lado al pasar el cursor.

Añade un efecto hover "Skew" en [dónde].
El elemento debe inclinarse de lado hasta quedar ligeramente sesgado mientras el cursor está encima, y enderezarse cuando sale: rápido y suave.
Mantén el texto legible mientras está inclinado, evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, aparece un pequeño triángulo de bocadillo en un lado del elemento.

Añade un efecto hover "Speech Bubble" (también llamado bubble) en [dónde].
Una pequeña cola triangular debe deslizarse desde detrás de un lado del elemento, convirtiéndolo en un bocadillo, y volver a ocultarse cuando el cursor sale: rápido y suave.
Mantén la cola del mismo color que el elemento para que se lean como una sola forma 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.

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.

La tarjeta se desplaza y se escala ligeramente en respuesta al movimiento del cursor sobre ella.

Añade un efecto "Wobble Card" en [dónde].
Al mover el cursor sobre la tarjeta, esta debe desplazarse un poco hacia él mientras su contenido se desplaza un poco en sentido contrario con un ligero aumento de escala, siguiéndolo con suavidad, y todo vuelve a su sitio cuando el cursor sale.
Mantén el movimiento pequeño y desactívalo en dispositivos táctiles y si el usuario prefiere movimiento reducido (prefers-reduced-motion).