Botão E-mail Bulletproof
Gera HTML de botão para e-mail compatível com Outlook.
HTML
—
Bulletproof HTML email buttons that survive every client
HTML email is a different beast from the modern web. Outlook 2007-2021 on Windows still renders messages with the Microsoft Word HTML engine, not WebKit or Blink, which means many modern CSS properties — flexbox, grid, box-shadow, and even reliable padding on anchor tags — silently break. Gmail strips <head> styles in some inbox views, Yahoo rewrites class names, and the iOS Mail app handles things differently from macOS Mail. The only safe pattern is the bulletproof button: a table cell with a background colour, a nested anchor with inline padding, and optional VML (Vector Markup Language) fallback for Outlook gradients and rounded corners.
The minimal bulletproof button looks like this — table-based, inline CSS, no external assets:
<table border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#1e40af" style="padding: 12px 24px; border-radius: 6px;">
<a href="https://example.com" style="color:#fff; text-decoration: none; display: inline-block; font-family: Arial, sans-serif; font-size: 16px;">Click Here</a>
</td></tr>
</table>Why image buttons fail and HTML buttons win
A common shortcut is to design the button in Figma, export a PNG and link the image — but Gmail blocks images by default until the recipient clicks Display images, and many corporate filters strip remote images entirely. An HTML button always renders, the text is selectable, screen readers can announce it, and it scales with system font size. Use images only for logos and decorative content; the CTA itself must be live HTML.
Inline-CSS pipelines: Juice, Premailer, MJML
External stylesheets and <style> blocks are unreliable across clients, so production teams inline every rule. Popular tools: Juice (Node.js — used by Mailchimp), Premailer (Ruby — used by Litmus), and MJML (open-source from Mailjet), a React-like markup language where <mj-button> compiles to bulletproof HTML automatically, including the VML fallback for Outlook. Litmus and Email on Acid are the de-facto testing services — they preview your message in 80+ real inboxes (Gmail dark mode, Outlook 2016, iOS 17 Mail) before you hit send.
Mobile, dark mode and tracking
Tap targets must follow platform guidelines: 44 × 44 pt minimum on iOS (Apple Human Interface Guidelines) and 48 dp on Android (Material). Below that, fingers miss. Dark mode is handled by Apple Mail and Fastmail through @media (prefers-color-scheme: dark), while Gmail auto-inverts colours with its own opaque algorithm — test both. For analytics, append UTM parameters to every URL (?utm_source=newsletter&utm_medium=email&utm_campaign=...) so Google Analytics and your CRM can attribute the click. ESPs like Mailchimp, Klaviyo and HubSpot also inject a click-tracking redirect automatically.
FAQ
Button or plain link — which converts better? Buttons consistently win on CTR (industry benchmarks show 28-45% lift), especially on mobile where they are easier to tap and visually anchor the call to action. Reserve plain links for secondary actions inside body copy.
Can I use a gradient background? CSS gradients render in WebKit clients but Outlook on Windows falls back to no background — looking like white-on-white text. Use a solid colour as fallback (bgcolor attribute) and overlay the gradient with background-image; Outlook ignores the gradient and shows the solid.
Do rounded corners work? border-radius works everywhere except Outlook on Windows, which renders sharp corners. For most brands this trade-off is acceptable — the button still looks intentional. For pixel-perfect rounded corners on Outlook, wrap the button in VML <v:roundrect> with the same dimensions.
What about no-code builders? Stripo and Beefree offer drag-and-drop editors that export bulletproof HTML, and Mailchimp's classic editor wraps buttons in tested templates. They are great for marketing teams, but for transactional emails you still want a hand-tuned, version-controlled template.
Related Tools
Handwriting Generator
Convert typed text into an image with handwriting appearance. Useful for adding a personal touch to digital work.
Resume Generator
Fill a simple printable A4 CV from a form with personal data, education and experience.
Favicon Generator
Generate a favicon from text/emoji in all common sizes (16, 32, 48, 64, 192, 512). PNG download.