Un usuario se desplaza por la página, hojea títulos, imágenes y listas. El botón «Registrarse» se funde con el fondo y pasa desapercibido. El formulario que tiene debajo lleva tres días sin recibir ningún envío. Un escenario clásico: el botón existe, pero los clics no.

La solución no es un rediseño de $500 ni reescribir la página de aterrizaje. Bastan treinta líneas de CSS. Una animación sutil (una sacudida, un latido o un resplandor) hace que el ojo capte el botón sin destellos molestos. Una investigación del Nielsen Norman Group confirma que los elementos en movimiento atraen la atención 3 veces más rápido que los estáticos, pero solo cuando el movimiento está justificado y no compite con el contenido principal.

A continuación, tres opciones funcionales de botón CTA animado con código listo para usar. Desde una simple sacudida hasta un latido con resplandor combinados. Copie y pegue.

💡 Resumen rápido:

• Esqueleto HTML: marcado mínimo del botón con una clase modificadora que puede insertarse en cualquier formulario o página de aterrizaje.
• Efecto de sacudida: el botón se sacude cada 4 segundos mediante @keyframes, atrayendo la atención hacia la acción principal sin irritar al usuario.
• Efecto de latido: un pulso suave de sombra, una alternativa para sitios donde la sacudida se siente demasiado agresiva.
• Demostración en CodePen: un ejemplo en vivo donde puede ajustar la configuración y ver los resultados antes de añadirlo a su sitio.

Marcado HTML: esqueleto del botón animado

El marcado es intencionadamente simple. Sin frameworks, solo HTML puro. Un botón, una clase.

1
<input type="submit" name="submit" value="Get Ticket!"
2
  class="animated-btn animated-btn--shake">

Tres puntos que vale la pena señalar de inmediato. Primero: type="submit" significa que el botón funciona dentro de cualquier formulario sin necesidad de JavaScript adicional. Segundo: value es el texto que verá el usuario. Cámbielo por lo que necesite: «Descargar», «Registrarse» o cualquier otra cosa. Tercero: la clase modificadora animated-btn--shake controla el tipo de animación. Sustitúyala por --pulse o --glow para obtener un efecto diferente sin tocar el marcado.

Si inserta el botón fuera de un formulario, envuélvalo en <a href="..."> y reemplace input por <button>. Los estilos a continuación funcionan con ambas opciones.

Animación CSS: efecto de sacudida

La sacudida es el más notorio de los tres efectos. El botón se tambalea de izquierda a derecha entre 3 y 5 píxeles cada 4 segundos. El usuario se desplaza por la página, capta el movimiento con la visión periférica y dirige la mirada al botón. Cuatro segundos son suficientes para que la animación no se convierta en spam molesto.

1
/* === Shake button === */
2
.animated-btn--shake {
3
  animation: shake 4s ease-in-out infinite;
4
  transform-origin: center center;
5
}
6
 
7
@keyframes shake {
8
  0%, 100%   { transform: translateX(0); }
9
  2%         { transform: translateX(-4px) rotate(-1deg); }
10
  4%         { transform: translateX(4px) rotate(1deg); }
11
  6%         { transform: translateX(-3px); }
12
  8%         { transform: translateX(3px); }
13
  10%        { transform: translateX(0); }
14
}

Analicemos las decisiones clave. animation: shake 4s ease-in-out infinite: en nuestro ejemplo, el ciclo completo dura varios segundos, pero la animación está activa solo una pequeña fracción de ese tiempo. El resto del tiempo, el botón permanece quieto. Esto es importante: una sacudida constante irrita, mientras que un movimiento medido atrae.

transform-origin: center center fija el punto de rotación en el centro para que el botón no se «desplace» hacia un lado durante la rotación.

rotate() a 1 grado añade realismo. Un translateX puro se ve mecánico; una ligera inclinación crea la ilusión de fuerza física, como si alguien tirara del botón con una cuerda.

Añada estilos que combinen con su diseño: color de fondo mediante background, redondeo de esquinas con border-radius, relleno y tamaño de fuente con font-size. La animación no depende del estilo y funciona con cualquier color y tamaño.

Variación: efecto de latido

La sacudida no es apropiada en todas partes. En el sitio web de un banco corporativo o una clínica médica, un botón que se sacude resulta fuera de lugar. El latido ofrece una forma más tranquila de atraer la atención: la sombra del botón se expande y contrae suavemente, creando un efecto de «respiración».

1
/* === Pulse button === */
2
.animated-btn--pulse {
3
  animation: pulse 3s ease-in-out infinite;
4
}
5
 
6
@keyframes pulse {
7
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.5); }
8
  50%      { box-shadow: 0 0 0 12px rgba(46, 139, 87, 0); }
9
}

La sombra se expande desde el botón 12 píxeles y se desvanece hasta volverse transparente. El ciclo es de 3 segundos, ligeramente más rápido que la sacudida, porque el latido es menos intrusivo y el ojo perdona un ritmo más rápido.

Sustituya su propio color en rgba(). La fórmula: tome el color principal del botón y ajuste su alfa a 0.5 en el fotograma clave inicial y a 0 en el final. Para un botón verde, use rgba(46, 139, 87, 0.5); para azul, use rgba(41, 128, 185, 0.5).

Puede combinar sacudida y latido en el mismo botón, pero no lo recomendamos. Dos movimientos simultáneos entran en conflicto y se ven desordenados. Elija uno según el carácter del sitio y la audiencia.

CodePen: ejemplo en vivo

Hemos publicado código listo para usar con ambas opciones de animación en CodePen. Ábralo, cambie la duración, los colores, el relleno y observe los resultados en tiempo real.

La inserción en un sitio mediante CSS adicional (Apariencia → Personalizar → CSS adicional) toma un minuto. Copie el bloque que necesite, péguelo, guarde. Un botón en el marcado de su tema o en un plugin de formulario recogerá los estilos por clase.

Si usa WordPress, el camino es aún más corto: vaya al panel de administración, abra la página o entrada en el editor, encuentre el botón y añada la clase animated-btn animated-btn--shake en los ajustes del bloque. Coloque los estilos en CSS adicional y se cargarán en el front-end sin editar los archivos del tema.

El video de arriba es un tutorial práctico para crear el efecto de sacudida desde cero. El autor demuestra el proceso en tiempo real: desde el marcado hasta los ajustes finales en DevTools (inglés, 4 minutos).

⁉️🤔 Preguntas frecuentes

¿La animación ralentizará la carga de la página?

Treinta líneas de CSS pesan menos de 1 KB incluso sin compresión. Sin bibliotecas adicionales, sin JavaScript. El tiempo de carga de la página no cambiará. A modo de comparación: un solo ícono de Font Awesome promedia 2-3 KB.

¿La animación funciona en dispositivos móviles?

Sí, transform y box-shadow tienen aceleración por hardware en iOS y Android desde las versiones de 2016. La única salvedad: Safari anterior a la versión 15 a veces tartamudea con box-shadow durante repintados frecuentes. Soluciónelo añadiendo will-change: box-shadow al botón de latido.

¿Cómo desactivo la animación para usuarios con trastornos vestibulares?

Envuelva la animación en @media (prefers-reduced-motion: no-preference). Así, si el ajuste «Reducir movimiento» está activado en el sistema operativo, el botón permanecerá estático. Los navegadores modernos admiten esta consulta de medios desde 2019.

¿Puedo activar la animación solo al pasar el cursor?

Reemplace infinite por none en la propiedad animation y luego describa el estado hover por separado: .animated-btn:hover { animation: shake 0.4s ease-in-out; }. El botón se sacudirá una vez al pasar el cursor y se detendrá. Esto funciona para situaciones donde la animación autónoma entra en conflicto con el diseño.

¿Por qué mi botón no se anima después de pegar el código?

Tres razones comunes: la clase se copió incorrectamente (verifique que sea animated-btn--shake con dos guiones); el archivo CSS del tema anula animation (añada !important o aumente la especificidad del selector); el botón está dentro de un contenedor con overflow: hidden que recorta la sombra del latido.

Animar o no animar: el desglose final

Efecto de sacudida, efecto de latido o un botón estático: la elección depende del contexto, no de las tendencias. ¿Una página de aterrizaje comercial con un solo botón CTA? Sacudida cada 4 segundos, sin duda. ¿Un panel de administración o tablero con docenas de botones en pantalla? Manténgalos estáticos y anime solo la acción principal. ¿Un sitio corporativo con una audiencia conservadora? Resalte con latido, minimalista y respetable.

Una regla que hemos derivado de docenas de pruebas A/B: un botón animado aumenta la conversión en unos pocos puntos porcentuales, siempre que la animación sea única y no compita por la atención con los elementos vecinos. Dos botones animados uno al lado del otro implican una menor conversión porque el usuario se confunde y no hace clic en ninguno.

Copie el código de la sección anterior, adapte los colores y la duración a su proyecto. Si le gusta el resultado, consulte nuestra selección de plugins de caché. Le ayudarán a mantener la velocidad del sitio incluso con una docena de elementos animados en la página.