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
hrefabsoluto 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:
- Confirmar o destino: o link final está ativo e abre em rede móvel e Wi-Fi?
- Checar reescrita: rastreamento e Safe Links estão alterando a URL?
- Adicionar fallback urgente: link em texto e uma versão alternativa da landing
- Reduzir complexidade: botão simples, sem CSS avançado, sem overlays
- 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 😉