Botão E-mail Bulletproof
Gere um botão (CTA) em HTML bulletproof para e-mail marketing, que funciona até no Outlook. Personalize cor, texto e link e copie o código pronto para usar.
HTML
—
Botões HTML em e-mail que sobrevivem em todos os clientes
E-mail HTML é um bicho diferente da web moderna. O Outlook 2007-2021 no Windows ainda renderiza mensagens com o motor HTML do Microsoft Word, não WebKit ou Blink, o que significa que muitas propriedades CSS modernas — flexbox, grid, box-shadow e até padding em âncoras — quebram silenciosamente. O Gmail remove estilos no <head> em algumas visualizações, o Yahoo reescreve nomes de classe, e o iOS Mail trata as coisas diferente do Mail do macOS. O único padrão seguro é o bulletproof button: uma célula de tabela com cor de fundo, uma âncora aninhada com padding inline e fallback opcional em VML (Vector Markup Language) para gradientes e cantos arredondados no Outlook.
O bulletproof button mínimo tem essa cara — baseado em tabela, CSS inline, sem assets externos:
<table border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#1e40af" style="padding: 12px 24px; border-radius: 6px;">
<a href="https://exemplo.com" style="color:#fff; text-decoration: none; display: inline-block; font-family: Arial, sans-serif; font-size: 16px;">Clique Aqui</a>
</td></tr>
</table>Por que botão em imagem falha e botão HTML vence
Um atalho comum é desenhar o botão no Figma, exportar um PNG e linkar a imagem — mas o Gmail bloqueia imagens por padrão até o destinatário clicar em Exibir imagens, e muitos filtros corporativos removem imagens remotas inteiramente. Um botão HTML sempre renderiza, o texto fica selecionável, leitores de tela conseguem anunciá-lo e ele escala com o tamanho de fonte do sistema. Use imagens apenas para logo e conteúdo decorativo; o CTA em si tem que ser HTML vivo.
Pipelines de CSS inline: Juice, Premailer, MJML
Stylesheets externos e blocos <style> são pouco confiáveis entre clientes, então times de produção inlinam toda regra. Ferramentas populares: Juice (Node.js — usado pelo Mailchimp), Premailer (Ruby — usado pela Litmus) e MJML (open-source da Mailjet), uma linguagem de marcação parecida com React em que <mj-button> compila para HTML bulletproof automaticamente, incluindo o fallback VML para Outlook. Litmus e Email on Acid são os serviços de teste de fato — eles renderizam sua mensagem em 80+ caixas reais (Gmail dark mode, Outlook 2016, iOS 17 Mail) antes do envio.
Mobile, dark mode e tracking
Alvos de toque precisam seguir as diretrizes de plataforma: 44 × 44 pt mínimo no iOS (Apple Human Interface Guidelines) e 48 dp no Android (Material). Abaixo disso, dedos erram. Dark mode é tratado por Apple Mail e Fastmail via @media (prefers-color-scheme: dark), enquanto o Gmail inverte cores automaticamente com seu próprio algoritmo opaco — teste ambos. Para analytics, anexe parâmetros UTM a cada URL (?utm_source=newsletter&utm_medium=email&utm_campaign=...) para que Google Analytics e seu CRM atribuam o clique. ESPs como Mailchimp, Klaviyo e HubSpot também injetam redirect de tracking automaticamente.
Perguntas frequentes
Botão ou link de texto — qual converte mais? Botões ganham consistentemente em CTR (benchmarks da indústria mostram 28-45% de lift), especialmente em mobile onde são mais fáceis de tocar e ancoram visualmente a chamada para ação. Reserve links de texto para ações secundárias dentro do corpo.
Posso usar fundo em gradiente? Gradientes CSS renderizam em clientes WebKit, mas o Outlook no Windows cai para sem fundo — virando texto branco em branco. Use uma cor sólida como fallback (atributo bgcolor) e sobreponha o gradiente via background-image; o Outlook ignora o gradiente e mostra a cor sólida.
Cantos arredondados funcionam? border-radius funciona em toda parte exceto Outlook no Windows, que renderiza cantos retos. Para a maioria das marcas o trade-off é aceitável — o botão continua parecendo intencional. Para cantos arredondados pixel-perfect no Outlook, envolva o botão em VML <v:roundrect> com as mesmas dimensões.
E construtores no-code? Stripo e Beefree oferecem editores drag-and-drop que exportam HTML bulletproof, e o editor clássico do Mailchimp envolve botões em templates testados. São ótimos para times de marketing, mas para e-mails transacionais você ainda quer um template ajustado à mão e versionado.
Ferramentas Relacionadas
Assinatura de E-mail
Crie uma assinatura de e-mail profissional em HTML com nome, cargo, contatos e links. Copie o código pronto e cole no Gmail, Outlook ou seu cliente de e-mail.
Prompt E-mail Formal
Prompt para gerar e-mail formal a partir de um briefing.
Gerador de Vitest test skeleton
Gera arquivo Vitest (TypeScript) com describe/it/expect para uma função importada de um módulo.