Cómo hacer que la animación de pulsación de un botón se sienta bien
Guía práctica de la respuesta al pulsar: qué animar, cuánto, a qué velocidad y cómo mantenerla para teclado y para quien pide movimiento reducido.
Idea clave
Una buena animación de pulsación empieza en el mismo fotograma que el clic o el toque, cambia una o dos propiedades visuales muy poco y vuelve rápido. Normalmente basta con una escala ligera y un cambio de color o de sombra. El objetivo es confirmar, no decorar: mantén el área de toque igual, no desplaces mucho la etiqueta y asegúrate de que el mismo aviso llega a quien usa teclado o movimiento reducido.
Para qué sirve realmente el estado pulsado
La animación responde a una pregunta: ¿la interfaz recibió mi entrada? Esa pregunta se hace en los primeros fotogramas. Si la respuesta visual llega después de terminar el manejador del clic, la interfaz se siente desconectada aunque funcione. Empieza el cambio al presionar, no al soltar, y deja que la vuelta ocurra después.
Elige el cambio más pequeño que se lea con claridad
Los efectos de pulsación que mejor funcionan mueven muy poco. Una escala de 0,96 a 0,98, un tono algo más oscuro o una sombra comprimida suelen bastar. Escalar el botón es seguro porque no refluye el texto; cambiar relleno, ancho o márgenes desplaza todo lo que lo rodea.
- Escala el botón, no el tamaño de su texto
- Oscurece un poco el fondo en lugar de añadir un resplandor
- Mantén el área de toque completa aunque el botón parezca pulsado
- No desplaces la etiqueta hasta que el usuario pierda la referencia
Tiempo: pulsación rápida, vuelta natural
La pulsación debe sentirse inmediata; basta una transición muy corta o un muelle rígido. La vuelta puede ser algo más lenta y suave, porque ahí vive la personalidad. No añadas retraso antes del estado pulsado y no esperes a la red para mostrar respuesta.
Muelles y transiciones hacen trabajos distintos
Una transición CSS es sencilla y barata para una pulsación fija. Un muelle es mejor cuando el botón puede volver a pulsarse a mitad de la animación, cuando forma parte de un gesto o cuando la vuelta debe heredar la energía de la pulsación. No necesitas un muelle en todos los botones, solo donde hay interrupción.
Teclado, táctil y movimiento reducido
Quien usa teclado activa los botones con Intro o Espacio y también necesita una respuesta visible. Mantén un anillo de foco claro y no elimines el contorno del navegador sin sustituirlo. Si alguien pide movimiento reducido, acorta la animación o cambia la escala por un cambio de color inmediato.
Una lista de comprobación breve
Pulsa el botón lo más rápido que puedas y comprueba que los estados no se atascan. Pulsa, arrastra el puntero fuera y suelta: debe volver al reposo. Prueba en un teléfono de gama media y activa el botón con el teclado para ver si aparece el mismo aviso.
Fragmento de implementación en producción
/* Press feedback without layout work */
.button {
transition: transform 120ms ease-out, background-color 120ms ease-out;
}
.button:active {
transform: scale(0.97);
background-color: #e8431a;
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: background-color 80ms linear;
}
.button:active {
transform: none;
}
}Principios clave para recordar
- Inicia el estado pulsado al presionar, no después del manejador del clic
- Cambia escala o color muy poco, nunca propiedades de diseño
- La vuelta puede ser más suave y lenta que la pulsación
- Quien usa teclado necesita la misma confirmación que quien usa ratón
- El movimiento reducido debe acortar el desplazamiento, no quitar el aviso
Preguntas frecuentes
Fuentes
- Motion — Apple Human Interface Guidelines
- prefers-reduced-motion — MDN Web Docs
- Understanding Success Criterion 2.3.3: Animation from Interactions — W3C WAI