1) O HTML de e-mail não é “HTML de site”

Um erro clássico é imaginar que e-mail suporta o mesmo CSS de um site. Na prática, muitos clientes têm suporte limitado: ignoram propriedades modernas, removem trechos suspeitos e reescrevem estilos. Outlook (desktop), por exemplo, historicamente tem regras próprias e pode tratar o layout como se fosse um documento, não uma página web completa.

Isso afeta diretamente botões: quando o botão depende de CSS avançado (flex, position, background-image, pseudo-elementos), há chance de ele ser renderizado como um link comum ou perder o “corpo” visual. Por isso, em e-mail, o jeito mais compatível é usar estruturas tradicionais e estilos simples.

2) CSS externo e <style> podem ser removidos

Muitos templates usam CSS em um arquivo externo ou em um bloco <style> no cabeçalho. Só que vários clientes de e-mail cortam ou ignoram isso, especialmente quando o e-mail passa por filtros corporativos, gateways anti-spam ou sistemas de automação.

Se o seu botão depende de uma classe (ex.: .btn-primary) definida em <style>, e esse <style> é removido, sobram apenas as tags “cruas”: o botão vira um link normal. Por isso, o padrão mais seguro é usar CSS inline (style="...") diretamente no elemento.

Mesmo com CSS inline, algumas propriedades são ignoradas. Então, além de inline, é importante usar um conjunto “conservador” de estilos, evitando dependência de recursos modernos.

3) Imagens bloqueadas = botões “invisíveis”

Em muitos e-mails, o botão não é um botão de verdade: é uma imagem clicável (um banner com texto “Clique aqui”). Isso funciona até o cliente bloquear imagens por padrão — algo comum para proteger privacidade e economizar dados.

Quando as imagens não carregam, o “botão-imagem” desaparece e o usuário só vê um espaço vazio (ou um ícone quebrado). Se o texto do botão também estava na imagem, acabou: a ação fica invisível. Por isso, em e-mail compatível, o botão deve ser um elemento clicável com texto real, e não depender de imagem para existir.

Se você precisa usar imagem, pelo menos inclua texto alternativo (alt) e, melhor ainda, coloque um link textual abaixo do botão como fallback: “Se o botão não aparecer, clique aqui”. Isso reduz perdas de conversão por bloqueio de imagens.

4) Links reescritos (rastreamento) e clientes que “quebram” o estilo

Plataformas de e-mail marketing e sistemas de rastreamento costumam reescrever links: trocam o href original por uma URL de tracking que redireciona. Em geral, isso é normal, mas alguns clientes aplicam regras agressivas a links “longos” ou suspeitos.

Às vezes o link é reescrito de um jeito que altera atributos, remove estilos do elemento ou muda o comportamento do clique. Isso também pode acontecer quando a mensagem passa por um gateway corporativo que adiciona proteção contra phishing (ex.: “safe links”).

Resultado típico: o botão aparece, mas perde cor, perde borda arredondada, ou a área clicável fica menor do que deveria. Nesse cenário, layouts simples e com boa tolerância a alterações no <a> tendem a se sair melhor.

5) Dark Mode altera cores e “apaga” botões

O modo escuro é um dos maiores responsáveis por botões que “somem”. Alguns clientes fazem inversão automática de cores: texto claro vira escuro, fundo claro vira escuro e por aí vai — nem sempre com inteligência.

Um exemplo comum: botão com fundo escuro e texto branco. O cliente decide que o fundo deve ficar claro, mas esquece de ajustar o texto — ou vice-versa. Resultado: texto “some” no fundo, e o botão parece vazio. Também acontece com bordas muito claras ou sombras sutis, que desaparecem no dark mode.

A mitigação envolve usar contraste forte, evitar tons muito próximos e, quando possível, garantir que o botão ainda tenha uma borda ou um bloco bem definido mesmo se as cores mudarem. E, principalmente, sempre oferecer um link alternativo logo abaixo.

6) Fontes, espaçamento e quebra de linha: cada cliente decide de um jeito

Em e-mail, tipografia é “terra sem lei”. Se você usa uma fonte web (via @font-face ou link externo), muitos clientes ignoram e usam fontes padrão. Isso muda largura do texto, o que muda quebras de linha e pode “empurrar” elementos para lugares inesperados.

O botão é sensível a isso: um texto maior pode estourar a largura e quebrar em duas linhas, deixando o botão mais alto e desalinhado. Se o template não foi planejado para tolerar variação de fonte/tamanho, o layout desmonta.

A prática mais segura é trabalhar com largura fluida, tolerar quebras e usar padding suficiente. Botões precisam de espaço interno e largura que funcione tanto em telas pequenas quanto grandes.

7) Flexbox, Grid e posicionamento moderno: alto risco no e-mail

Em páginas web, é comum montar botões e layouts com flexbox e grid. No e-mail, isso é risco. Alguns clientes até aceitam, mas outros ignoram parcialmente ou totalmente. Quando um container perde display:flex, itens podem empilhar de forma errada, alinhamentos somem e o botão “cai” para baixo.

Em e-mails com alto volume (transacionais, confirmações, reset de senha), o ideal é usar uma estrutura previsível: blocos empilhados, alinhamentos simples e estilos que não dependam de layout moderno para funcionar.

8) Segurança: scripts e elementos “ativos” são removidos

E-mail é um alvo clássico de ataques. Por isso, clientes removem qualquer coisa que pareça ativa: scripts, iframes, formulários e até certos atributos. Se o seu “botão” depende de algum comportamento dinâmico, ele vai falhar.

Botão de e-mail deve ser só isso: um link claro e seguro. Qualquer lógica deve acontecer na página de destino, não dentro do e-mail. Essa regra não é estética — é sobrevivência.

9) Largura fixa e responsividade: o botão pode sair da tela no celular

Um e-mail que foi desenhado com largura fixa (por exemplo, 600px com elementos internos também fixos) pode até parecer bom no desktop, mas no celular vira um pesadelo: o usuário precisa dar zoom ou rolar lateralmente. Botões podem ficar cortados, e o clique vira difícil.

Quando o botão “some” no celular, muitas vezes ele não sumiu: ele foi empurrado para fora do viewport, ou ficou abaixo de um bloco quebrado. A solução é evitar larguras rígidas internas e manter botões com dimensões que se adaptem (ou, pelo menos, que não excedam a tela).

10) Anti-spam e “sinais” que fazem o cliente degradar o HTML

Alguns filtros anti-spam e gateways corporativos reescrevem partes do e-mail. Se o HTML é muito pesado, contém muitos elementos aninhados ou tem padrões que parecem suspeitos, o filtro pode simplificar a mensagem. Isso impacta a renderização.

E-mails com muitos estilos repetidos, imagens em excesso e links demais podem sofrer “tratamento”. O sintoma pode aparecer como formatação quebrada, botões que viram texto simples e espaçamentos estranhos. Quanto mais limpo e direto o HTML, melhor.

Como diagnosticar rápido: o que olhar primeiro

1. O botão é texto + link ou é imagem? Se for imagem, teste com imagens bloqueadas. Se sumir, você achou a causa.
2. O CSS está em <style> ou inline? Se está em <style>, há chance de ser removido. Inline costuma sobreviver melhor.
3. O e-mail quebra só no Outlook? Provável incompatibilidade de layout ou CSS não suportado.
4. Quebra só no modo escuro? Suspeite de inversão automática e contraste insuficiente.
5. Quebra só em ambientes corporativos? Pode ser safe links, reescrita de HTML ou bloqueio de imagens mais agressivo.

Diagnosticar por “onde quebra” ajuda a reduzir o universo de causas. Em e-mail, a diferença entre Gmail web, Gmail app, Outlook desktop e Apple Mail é grande. Testar em mais de um ambiente é essencial.

Boas práticas para botões que funcionam “em todo lugar”

1) Use botão com texto real e link claro

O botão deve ser um link (<a>) com texto dentro. Isso garante que, mesmo que o estilo falhe, ainda existe uma ação clicável e visível. Um botão que vira link ainda funciona. Um botão-imagem que não carrega, simplesmente desaparece.

2) Tenha fallback: link alternativo abaixo

Coloque um texto do tipo: “Se você não conseguir clicar no botão, use este link: …”. Isso salva o usuário quando o cliente quebra estilos, quando o botão não aparece ou quando há bloqueio.

3) Contraste forte e bordas visíveis

Evite tons muito próximos. Um bom botão precisa ser reconhecido mesmo no modo escuro. Bordas ajudam quando o fundo é “recalculado” automaticamente.

4) Evite CSS moderno como dependência

Flex e grid podem ser usados com cuidado, mas não como base da funcionalidade. O layout deve continuar legível mesmo se o cliente ignorar essas propriedades.

5) Reduza complexidade do HTML

Quanto mais simples o HTML, menos chance de alguma camada “podar” partes do e-mail. Em e-mail, simplicidade não é preguiça: é compatibilidade.

6) Pense no mobile primeiro

Botões precisam ser fáceis de tocar: área generosa, espaçamento e texto legível. Mesmo que o estilo varie, o usuário deve conseguir identificar o CTA sem esforço.

Exemplos de situações reais (e como resolver)

“No Gmail fica perfeito, no Outlook vira só um texto azul”

Isso quase sempre aponta para estilos ignorados no Outlook. Se o botão depende de background, border-radius, ou posicionamento, o Outlook pode ignorar e mostrar o link padrão. A solução é usar estilos mais conservadores e garantir que o link esteja claro mesmo sem visual “de botão”.

“No celular o botão não aparece, mas no desktop aparece”

Em geral é responsividade ruim: largura fixa, elementos empurrados ou quebras de linha que deslocam o CTA. Ajustar o layout para ser fluido e evitar larguras internas rígidas costuma resolver.

“No modo escuro o texto do botão desaparece”

Problema típico de inversão automática. A correção é aumentar contraste, evitar combinações frágeis e, de novo, ter um link alternativo visível logo abaixo.

“Botão aparece, mas não dá para clicar”

Pode ser sobreposição de elementos, área clicável menor do que parece, ou reescrita de links por proteção anti-phishing. Manter um layout simples e evitar camadas sobrepostas melhora bastante.

Checklist final antes de enviar um e-mail importante

• O CTA existe como texto + link, não só como imagem.
• O CSS crítico está em inline (não depende só de <style>).
• Existe um link alternativo visível perto do botão.
• O e-mail continua legível com imagens bloqueadas.
• O botão continua legível no dark mode (ou pelo menos não some).
• O layout não exige rolagem lateral no mobile.
• O conteúdo não parece suspeito (excesso de links/imagens pode piorar entrega e renderização).