Icon Spin
Un icono dentro de un botón gira sobre sí mismo al pasar el cursor por el botón.
Se usa en
Botones de icono
Variantes
- Icon Spin
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 "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.Animaciones parecidas
Spin
También llamado Rotate Loop, Spinner
El elemento gira sin parar a velocidad constante.
Se usa en
Indicadores de carga (spinners)
Añade un efecto "Spin" (también llamado spinner o rotate loop) en [dónde].
El elemento debe girar sin parar a una velocidad constante y uniforme, sin easing entre vueltas.
Haz que el bucle no tenga cortes, dale al spinner una etiqueta de carga accesible, y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Pasa el ratón por encima
El elemento gira unos pocos grados al pasar el cursor.
Se usa en
Iconos, miniaturas
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.A
Pasa el ratón por encima
Al pasar el cursor, un icono cae fuera de la vista y vuelve desde arriba.
Se usa en
Botones de icono
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.Más en Hover
AA
Pasa el ratón por encima
Al pasar el cursor, el texto del botón sale deslizándose y entran una flecha y un relleno que se expande.
Se usa en
Botones CTA
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.Pasa el ratón por encima
Nudge Forward / Backward
También llamado Arrow nudge
Al pasar el cursor, una flecha o el propio elemento se desliza un poco hacia delante o hacia atrás.
Se usa en
Enlaces de siguiente/anterior, flechas
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.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.