Trim
Al pasar el cursor, aparece una línea de borde interior dentro del contorno del elemento.
Se usa en
Botones, tarjetas
Variantes
- Trim
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
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.Animaciones parecidas
A
Pasa el ratón por encima
Al pasar el cursor, un contorno crece hacia fuera desde el elemento o se contrae hacia él.
Se usa en
Botones
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.A
Pasa el ratón por encima
El color del borde aparece o cambia con un fundido al pasar el cursor.
Se usa en
Botones, campos de entrada
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.A
Pasa el ratón por encima
Hollow
También llamado Ghost fill
Al pasar el cursor, el fondo relleno se vacía y deja solo el botón con contorno.
Se usa en
Botones
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.Más en Hover
ABC
Pasa el ratón por encima
Underline Reveal
También llamado Overline Reveal, Reveal
Una línea entra deslizándose desde el borde inferior o superior hasta su lugar para subrayar o sobrerrayar el elemento.
Se usa en
Enlaces de navegación, botones
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.A
Mueve el puntero aquí
La tarjeta se desplaza y se escala ligeramente en respuesta al movimiento del cursor sobre ella.
Se usa en
Tarjetas promocionales
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).A
Pasa el ratón por encima
Un fondo de color entra barriendo desde un borde con un rebote elástico que se pasa un poco.
Se usa en
Botones
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.