Bulletproof Email Button Generator
Build a button that renders in Outlook 2007–2021 and classic Microsoft 365 — the clients whose Word engine ignores border-radius and padding on links — as well as Gmail, Apple Mail, Yahoo and 11 more. Configure it below and copy the VML + HTML. No account, no sign-up.
Computed button box: 235×44px. Preview shows the non-Outlook fallback; the VML block above renders identically in Outlook 2007–365.
<!-- Bulletproof button — renders in Outlook (VML) + every other client (anchor) -->
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:44px;v-text-anchor:middle;width:235px;" arcsize="14%" strokecolor="#8a7544" fillcolor="#8a7544">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;">Confirm your email</center>
</v:roundrect>
<![endif]-->
<a href="https://example.com"
style="background-color:#8a7544;border:1px solid #8a7544;border-radius:6px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;line-height:44px;text-align:center;text-decoration:none;width:235px;-webkit-text-size-adjust:none;mso-hide:all;">Confirm your email</a>
</div>Why a normal CSS button breaks in Outlook
Desktop Outlook on Windows (versions 2007, 2010, 2013, 2016, 2019, 2021 and the classic Microsoft 365 client) renders email through Microsoft Word's HTML engine, not a browser. Word silently drops several properties a button depends on:
- border-radius is ignored — rounded corners render as hard rectangles.
- padding on an inline <a> is ignored — the click target shrinks to the text bounds.
- background-image on the button is dropped — gradient or image buttons lose their fill.
- display: inline-block is unreliable — width and centering drift.
The generator solves this with a <v:roundrect> VML shape wrapped in an <!--[if mso]--> conditional comment. Outlook reads the VML; every other client reads the styled <a> tag, which is hidden from Outlook via mso-hide:all. The arcsize attribute reproduces your corner radius, and w:anchorlock makes the whole shape clickable.
Frequently asked questions
Why do email buttons break in Outlook?
Outlook 2007 through 2021 and classic Microsoft 365 desktop render HTML with the Microsoft Word engine, not a browser engine. Word ignores border-radius, padding on inline <a> tags, and background-image, so a CSS-only button collapses to plain underlined text. The fix is a VML <v:roundrect> shape that Word does understand.
What is a bulletproof button?
A bulletproof button is a clickable email button built so it renders identically across every major client, including Outlook. It pairs a VML roundrect (wrapped in an <!--[if mso]--> conditional comment for Outlook) with a styled <a> tag for all other clients. Each client reads only the version it supports.
Does this work in dark mode?
The button uses explicit background and text colors inline, which survive most dark-mode repainting. Gmail and Apple Mail may still adjust colors; set a high-contrast pair (for example white text on a saturated background) and test before sending.
Do I still need to test the button after generating it?
Yes. A generator produces correct markup, but real inboxes vary by version and settings. Paste the email into Emailens to confirm the button renders across all 15 clients, including Outlook and dark mode, before you ship.
Generated the button — now check the whole email
A correct button is one line of defense. Paste your full email into Emailens to catch every other thing 15 clients quietly rewrite — with framework-native fixes for React Email, MJML and Maizzle.