Um utilizador percorre a página, passa os olhos pelos títulos, imagens e listas. O botão «Inscrever-se» confunde-se com o fundo e passa despercebido. O formulário abaixo dele não tem qualquer submissão há três dias. Um cenário clássico: o botão existe, mas os cliques não.

A solução não é um redesenho de 500 € nem reescrever a página de destino. Trinta linhas de CSS são suficientes. Uma animação subtil (um abanão, pulsação ou brilho) faz o olhar captar o botão sem lampejos irritantes. Uma investigação do Nielsen Norman Group confirma que elementos em movimento atraem a atenção 3 vezes mais depressa do que os estáticos, mas apenas quando o movimento é justificado e não compete com o conteúdo principal.

Abaixo estão três opções funcionais de botões CTA animados com código pronto a usar. De um simples abanão a uma combinação de pulsação e brilho. Copie e cole.

💡 Resumo rápido:

• Estrutura HTML: marcação mínima do botão com uma classe modificadora que pode ser incorporada em qualquer formulário ou página de destino.
• Efeito de abanão: o botão abana a cada 4 segundos via @keyframes, chamando a atenção para a ação principal sem irritar o utilizador.
• Efeito de pulsação: uma pulsação suave da sombra, uma alternativa para sites onde o abanão parece demasiado agressivo.
• Demonstração no CodePen: um exemplo ao vivo onde pode ajustar definições e ver resultados antes de adicionar ao seu site.

Marcação HTML: estrutura do botão animado

A marcação é intencionalmente simples. Sem frameworks, apenas HTML puro. Um botão, uma classe.

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

Três pontos que vale a pena notar desde já. Primeiro: type="submit" significa que o botão funciona dentro de qualquer formulário sem JavaScript adicional. Segundo: value é o texto que o utilizador verá. Altere-o para o que precisar: «Transferir», «Inscrever-se» ou qualquer outra coisa. Terceiro: a classe modificadora animated-btn--shake controla o tipo de animação. Substitua-a por --pulse ou --glow para obter um efeito diferente sem mexer na marcação.

Se inserir o botão fora de um formulário, envolva-o em <a href="..."> e substitua input por <button>. Os estilos abaixo funcionam com ambas as opções.

Animação CSS: efeito de abanão

O abanão é o mais percetível dos três efeitos. O botão oscila para a esquerda e para a direita 3 a 5 píxeis a cada 4 segundos. Um utilizador percorre a página, capta o movimento na visão periférica e desloca o olhar para o botão. Quatro segundos são suficientes para evitar que a animação se torne spam irritante.

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
}

Vamos analisar as decisões principais. animation: shake 4s ease-in-out infinite: no nosso exemplo, o ciclo completo demora vários segundos, mas a animação está ativa apenas durante uma pequena fração desse tempo. No resto do tempo, o botão permanece imóvel. Isto é importante: abanar constantemente é irritante, enquanto um movimento comedido atrai.

transform-origin: center center fixa o ponto de rotação no centro para que o botão não «derive» para os lados durante a rotação.

rotate() a 1 grau acrescenta realismo. Apenas translateX parece mecânico; uma ligeira inclinação cria a ilusão de força física, como se alguém puxasse o botão por um fio.

Adicione estilos que correspondam ao seu design: cor de fundo via background, arredondamento dos cantos com border-radius, preenchimento e tamanho de letra com font-size. A animação não depende do estilo e funciona com quaisquer cores e tamanhos.

Variação: efeito de pulsação

O abanão não é apropriado em todo o lado. Num site de um banco corporativo ou de uma clínica médica, um botão a abanar parece deslocado. A pulsação oferece uma forma mais calma de chamar a atenção: a sombra do botão expande-se e contrai-se suavemente, criando um efeito de «respiração».

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
}

A sombra expande-se a partir do botão em 12 píxeis e desvanece até à transparência. O ciclo é de 3 segundos, ligeiramente mais rápido do que o abanão, porque a pulsação é menos intrusiva e o olhar perdoa um ritmo mais rápido.

Substitua a sua própria cor em rgba(). A fórmula: pegue na cor principal do botão e defina o seu alfa para 0,5 no fotograma-chave inicial e 0 no final. Para um botão verde, use rgba(46, 139, 87, 0.5); para azul, use rgba(41, 128, 185, 0.5).

Pode combinar abanão e pulsação no mesmo botão, mas não o recomendamos. Dois movimentos simultâneos entram em conflito e parecem desorganizados. Escolha um com base no caráter do site e na audiência.

CodePen: exemplo ao vivo

Publicámos código pronto a usar com ambas as opções de animação no CodePen. Abra-o, altere a duração, as cores, o preenchimento e veja os resultados em tempo real.

A incorporação num site via CSS Adicional (Aparência → Personalizar → CSS Adicional) demora um minuto. Copie o bloco de que precisa, cole-o, guarde. Um botão na marcação do seu tema ou plugin de formulário irá captar os estilos pela classe.

Se usa WordPress, o caminho é ainda mais curto: vá ao painel de administração, abra a página ou artigo no editor, encontre o botão e adicione a classe animated-btn animated-btn--shake nas definições do bloco. Coloque os estilos no CSS Adicional e eles carregarão no front-end sem editar ficheiros do tema.

O vídeo acima é um tutorial prático para criar o efeito de abanão de raiz. O autor demonstra o processo em tempo real: da marcação aos ajustes finais nas DevTools (inglês, 4 minutos).

⁉️🤔 Perguntas frequentes

A animação vai abrandar o carregamento da página?

Trinta linhas de CSS pesam menos de 1 KB mesmo sem compressão. Sem bibliotecas adicionais, sem JavaScript. O tempo de carregamento da página não se altera. Para comparação: um único ícone Font Awesome pesa em média 2 a 3 KB.

A animação funciona em dispositivos móveis?

Sim, transform e box-shadow são acelerados por hardware no iOS e Android a partir das versões de 2016. A única ressalva: o Safari anterior à versão 15 por vezes engasga-se com box-shadow durante repinturas frequentes. Corrija isto adicionando will-change: box-shadow ao botão de pulsação.

Como desativo a animação para utilizadores com distúrbios vestibulares?

Envolva a animação em @media (prefers-reduced-motion: no-preference). Assim, se a definição «Reduzir movimento» estiver ativada no sistema operativo, o botão permanecerá estático. Os navegadores modernos suportam esta media query desde 2019.

Posso acionar a animação apenas ao passar o rato?

Substitua infinite por none na propriedade animation e depois descreva o estado de hover separadamente: .animated-btn:hover { animation: shake 0.4s ease-in-out; }. O botão abanará uma vez ao passar o rato e parará. Isto funciona para situações em que a animação autónoma entra em conflito com o design.

Porque é que o meu botão não anima depois de colar o código?

Três razões comuns: a classe foi copiada incorretamente (verifique animated-btn--shake com dois hífenes); o ficheiro CSS do tema substitui animation (adicione !important ou aumente a especificidade do seletor); o botão está dentro de um contentor com overflow: hidden que corta a sombra da pulsação.

Animar ou não animar: a análise final

Efeito de abanão, efeito de pulsação ou um botão estático: a escolha resume-se ao contexto, não a tendências. Uma página de destino comercial com um único botão CTA? Abanão a cada 4 segundos, sem dúvida. Um painel de administração ou dashboard com dezenas de botões no ecrã? Mantenha-os estáticos e anime apenas a ação principal. Um site corporativo com uma audiência conservadora? Realce de pulsação, minimalista e respeitável.

Uma regra que derivámos de dezenas de testes A/B: um botão animado aumenta a conversão em alguns pontos percentuais, desde que a animação seja única e não compita pela atenção com elementos vizinhos. Dois botões animados lado a lado significam menor conversão porque o utilizador fica confuso e não clica em nenhum.

Copie o código da secção acima, adapte as cores e a duração ao seu projeto. Se gostar do resultado, veja a nossa seleção de plugins de cache. Eles ajudarão a manter a velocidade do site mesmo com uma dúzia de elementos animados na página.