← Blog Home

Buttons Don’t Work in Emails: causas comuns (e como resolver) 🧩📧

br 2026-02-25 07:32:52

Buttons Don’t Work in Emails: causas comuns (e como resolver) 🧩📧

Todo mundo já passou por isso: você monta um e-mail com um CTA impecável, “com cara de app”, e quando abre no inbox… o botão simplesmente não clica, ou abre uma página errada, ou não dá feedback nenhum. A frustração é real 😩 — e quase sempre a culpa não é do “botão em si”, mas de um conjunto de regras e limitações dos clientes de e-mail.

E-mail marketing não é web. O HTML é mais limitado, o CSS é capado, e cada cliente (Gmail, Outlook, Apple Mail, apps no iOS/Android, webmails) interpreta seu código de um jeito. Além disso, existem camadas extras: filtros anti-phishing, rastreadores, redirecionamentos, modos de economia de dados, bloqueio de imagens e até “proteções” que reescrevem links.

A boa notícia: dá para resolver a maioria dos casos com arquitetura de botão compatível, links bem construídos e um QA de envio mais rigoroso. Vamos ao que mais quebra botões — e como blindar.

1) Botão “não é botão”: o elemento clicável não existe de verdade

Em e-mail, o clique normalmente é um <a href="...">. Se você usa um “botão” só com <div> e CSS, pode até funcionar em alguns clientes, mas em muitos vai virar um bloco estático. O mesmo vale para usar onclick, JavaScript ou qualquer comportamento dinâmico: clientes de e-mail bloqueiam scripts.

Como corrigir: garanta que o CTA é um link real (<a>) com href absoluto (https) e área clicável ampla. O visual pode ser CSS, mas o “motor” tem que ser link.

2) Link quebrado, relativo ou “muito inteligente”

Links relativos (ex.: /promo) são perigosos em e-mail. Alguns clientes tentam “adivinhar” o domínio, outros não. Além disso, URLs com caracteres especiais, espaços, acentos e parâmetros mal codificados podem ser reescritas (ou cortadas) no caminho.

Outro clássico: você cola um link com parâmetros UTM gigantes, mistura com redirecionador, coloca dentro de um encurtador, e o cliente decide que aquilo “parece phishing” e desativa, ou mostra um aviso que quebra a experiência.

Como corrigir:

  • Use sempre URL absoluta: https://dominio/caminho
  • Encode correto de parâmetros (principalmente quando há caracteres especiais)
  • Evite encurtadores genéricos em campanhas sensíveis; prefira domínio próprio
  • Teste o link final após qualquer rastreamento/redirecionamento

3) Cliente de e-mail reescrevendo links (tracking, Safe Links, proteção do provedor)

Muita gente esquece que o link que sai do seu template nem sempre é o link que chega ao usuário. Plataformas de envio adicionam rastreamento; provedores corporativos podem passar por camadas como Microsoft Safe Links; antivírus e gateways podem reescrever tudo de novo. Resultado: o seu botão pode abrir uma URL intermediária, ou cair em um domínio que está bloqueado em alguma rede.

Como corrigir:

  • Se possível, use rastreamento com domínio personalizado (CNAME) para parecer consistente
  • Mantenha o destino final em HTTPS e com boa reputação (evite redirecionamentos em cadeia)
  • Evite misturar múltiplos encurtadores/rastreadores no mesmo link
  • Para ambientes corporativos, valide com um inbox de teste em conta Microsoft 365

4) CSS incompatível: o botão “quebra” e vira texto solto

E-mail é um zoológico de renderização. Algumas propriedades de CSS comuns na web não funcionam (ou funcionam parcialmente) em certos clientes. O Outlook (desktop), por exemplo, pode renderizar HTML com motor do Word. Isso afeta bordas arredondadas, padding, background e até alinhamento. Às vezes o botão “existe”, mas a área clicável fica minúscula ou deslocada.

Sinais típicos: o botão aparece, mas só uma parte clique; o texto fica clicável, mas o fundo não; o botão fica “quebrado” em duas linhas; o padding some.

Como corrigir: use botões com estrutura simples e “à prova de Outlook”: tabelas para layout, estilos inline e fallback para clientes problemáticos. Se precisar de borda arredondada perfeita no Outlook, muitos times usam VML como fallback — mas mesmo sem isso, dá para manter um CTA funcional e bonito com compatibilidade.

5) Imagens bloqueadas: CTA era uma imagem (e agora virou nada)

Se seu botão é uma imagem (ou o clique está sobre uma imagem), e o cliente bloqueia imagens por padrão, o usuário pode ver um espaço em branco ou um quadrado genérico. Em alguns casos, a imagem aparece, mas o clique fica inconsistente quando o download é adiado.

Como corrigir:

  • Prefira botões “bulletproof”: texto + background, não imagem
  • Se usar imagem, sempre tenha alt descritivo e um link redundante em texto próximo
  • Evite depender do carregamento de imagem para o CTA principal

6) Z-index, overlays e “camadas fantasmas” bloqueando o clique

Na web, a gente resolve muita coisa com posicionamento e camadas. Em e-mail, isso pode virar armadilha. Um elemento invisível por cima do botão (como um container com background, um spacer, ou um bloco responsivo mal fechado) pode “capturar” o clique. Alguns clientes ainda têm bugs com elementos posicionados, principalmente em layouts complexos.

Como corrigir: mantenha o layout simples, com tabelas ou blocos previsíveis, feche todas as tags corretamente e evite posicionamento absoluto para elementos essenciais. Quando há dúvida, reduza a composição: um botão por vez, em uma linha limpa, com espaçamento feito por padding/margins compatíveis.

7) Dark mode e contraste: o botão “some” (parece que não funciona)

Às vezes o botão funciona, mas o usuário jura que não — porque no modo escuro o contraste ficou ruim, o fundo mudou, a cor do texto foi ajustada automaticamente, e o CTA vira algo difícil de enxergar. Isso é especialmente comum quando o botão depende de cores muito próximas e não tem borda/contorno.

Como corrigir: use contraste forte, borda sutil (ou outline) e evite depender apenas do background para indicar clique. Mantenha também um link textual próximo, tipo “Se o botão não funcionar, clique aqui”.

8) Tamanho de fonte, line-height e área clicável pequena no mobile

No celular, a área clicável precisa ser generosa. Se o CTA vira um link pequeno, o usuário toca e não abre (ou abre errado), principalmente quando há zoom, fontes pequenas ou espaçamento apertado. Alguns clientes também ajustam o tamanho da fonte automaticamente, alterando a caixa do link.

Como corrigir:

  • Garanta área clicável confortável (altura de botão e padding consistente)
  • Evite fontes pequenas no CTA
  • Não coloque links muito próximos um do outro
  • Use espaçamento vertical claro entre blocos

9) Problemas com caracteres especiais e codificação

Em campanhas BR, é comum ter parâmetros com acentos, espaços ou símbolos no link (ex.: nomes de campanhas, categorias, títulos). Se isso não for codificado corretamente, alguns clientes interpretam o link até um certo ponto e o resto vira texto “normal”. O botão ainda pode abrir, mas para a URL errada.

Como corrigir: use URLs limpas, com slugs sem acento no caminho, e encode consistente nos parâmetros. Evite colocar texto humano dentro de parâmetros de URL sem codificação.

10) Filtros anti-phishing e reputação do domínio 😬

Alguns botões “falham” porque o cliente bloqueia o clique ou mostra um intersticial de segurança que assusta o usuário. Isso ocorre quando o domínio do link não tem boa reputação, quando há redirecionamentos suspeitos, quando o e-mail não está bem autenticado (SPF/DKIM/DMARC) ou quando o conteúdo parece muito “de golpe” (urgência exagerada, promessas agressivas, inconsistência de domínio).

Como corrigir: mantenha consistência entre domínio do remetente e domínio do link, evite cadeias longas de redirect, e cuide da autenticação e reputação. No copy, prefira clareza e contexto em vez de urgência alarmista. Em e-mail, confiança é parte da conversão.

Como construir um botão realmente confiável (o “bulletproof” do mundo real)

A forma mais robusta de CTA em e-mails é simples: um link <a> dentro de uma estrutura que todos os clientes entendem bem. Você não precisa “inventar moda” para ter um botão bonito; precisa de previsibilidade. Quando a renderização muda, o objetivo é que o botão continue clicável.

Boas práticas para um CTA consistente:

  • Link real com href absoluto em HTTPS
  • Estilos inline (muitos clientes ignoram CSS em <style>)
  • Layout simples (tabela ou blocos sem posicionamento complexo)
  • Texto claro (evite CTA genérico demais, tipo “Clique aqui” como única informação)
  • Fallback: link em texto perto do botão (“Se o botão não abrir, use este link”)

Checklist de QA antes de enviar ✅

Se você quer parar de “achar” que está tudo ok e começar a ter previsibilidade, adote um checklist. Ele pega a maioria dos problemas antes de virar campanha no ar.

  • Testar em pelo menos: Gmail (web + app), Outlook (desktop + web), iOS Mail, Android Mail
  • Validar clique do botão e do link de fallback
  • Confirmar que a URL final abre sem redirecionamentos suspeitos
  • Checar se imagens bloqueadas ainda deixam um CTA funcional
  • Verificar dark mode (contraste e legibilidade do CTA)
  • Conferir se o botão tem área clicável confortável no mobile
  • Inspecionar se algum elemento está cobrindo o botão (clique “morto”)
  • Garantir consistência de domínio (remetente, tracking e destino)

Plano de correção rápida quando o botão falha em produção

Se a campanha já saiu e você está recebendo reclamações, a prioridade é reduzir impacto rápido. Uma abordagem pragmática:

  1. Confirmar o destino: o link final está ativo e abre em rede móvel e Wi-Fi?
  2. Checar reescrita: rastreamento e Safe Links estão alterando a URL?
  3. Adicionar fallback urgente: link em texto e uma versão alternativa da landing
  4. Reduzir complexidade: botão simples, sem CSS avançado, sem overlays
  5. Retestar nos clientes que mais dão problema (Outlook desktop e Gmail mobile, normalmente)

Às vezes a correção não é “refazer o design”, e sim remover uma dependência: um encurtador, um redirect, um overlay, um botão-imagem, ou um CSS que só funciona em metade dos lugares.

Conclusão: e-mail é compatibilidade, não só estética ✉️

Quando um botão “não funciona” em e-mail, quase sempre existe um motivo técnico por trás: link que foi reescrito, elemento que não é clicável de verdade, CSS incompatível, imagem bloqueada, camada cobrindo, ou filtros de segurança desconfiando do destino. A solução é tratar o CTA como componente de compatibilidade: simples, previsível, testado e com fallback.

Se você adotar uma base robusta e um checklist consistente, aquela frase “o botão não clica” começa a desaparecer da sua rotina — e suas campanhas ganham algo raro no e-mail marketing: confiabilidade. E confiabilidade, no fim, é conversão 😉

Tip: Temporary inboxes are best for low-risk sign-ups and verification. Avoid sensitive accounts that require long-term recovery access.