Bulletproof Outlook Button Generator

Make a bulletproof button that survives every version of Outlook.

Free html email button generator that emits VML + CSS hybrid code. Customize colors, size, font, and corners — get production-ready bulletproof email buttons that render identically in Outlook, Gmail, and Apple Mail.

Generate a buttonOutlook backgrounds

Content

Appearance

Typography

Sizing

Preview

Generated code

<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:48px;v-text-anchor:middle;width:220px;" arcsize="83%" stroke="f" fillcolor="#ec4899">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="https://example.com"
style="background-color:#ec4899;border-radius:8px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;line-height:48px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none">Show me the button</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>

Bulletproof buttons solve the single biggest CTA problem in email

Outlook for Windows uses the Microsoft Word rendering engine. That sentence is the cause of basically every email design bug. Word does not understand modern CSS — no padding on <a>, no border-radius, no background-image on links. So your designer's beautiful 220×48px rounded pink CTA collapses in Outlook into a tiny underlined link the user will never click.

A bulletproof button fixes this with a tiny block of VML — Microsoft's own vector format — wrapped in <!--[if mso]> conditional comments. Outlook reads the VML and draws a proper rounded rectangle at the exact dimensions you specified. Every other client ignores the conditional and renders the standard CSS button below it. One HTML file. Perfect rendering everywhere. That's "bulletproof."

This generator does the VML math for you. Set the dimensions, colors, and corner radius. Copy the code. Paste into your template. Ship.

Bulletproof Email Button FAQs

A bulletproof button is an email CTA that renders identically across every email client, including Microsoft Outlook for Windows. Outlook does not support CSS padding on anchor tags or CSS border-radius, so a normal HTML button collapses or loses its rounded corners. Bulletproof buttons wrap the CTA in VML <v:roundrect> code so Outlook reads it as a vector shape — same colors, same dimensions, same rounded corners as every other client.
You set the text, URL, colors, dimensions, and corner radius for your email button, and the generator emits a single block of HTML that contains both the modern CSS path and the VML fallback path. Outlook clients use the VML; everyone else uses the CSS. You copy and paste — no manual VML editing.
Yes. The VML block is wrapped in <!--[if mso]> conditional comments, which only Outlook reads. Every other client — Gmail, Apple Mail, Yahoo, ProtonMail — sees the conditional as a regular HTML comment and ignores it, falling through to the modern <a> tag with inline CSS.
A normal <button> element is ignored or restyled by most email clients. An image button works but kills your CTA if images are blocked (which Outlook does by default). A bulletproof email button using VML is the only option that is text-based (loads instantly, accessible, image-block-safe) and visually identical across clients.
Yes. The generator supports VML <v:fill type="tile"> for buttons with tiled background images. Useful for textured CTAs and gradient effects that need to survive Outlook's VML renderer. Note: gradients in Outlook only support two-color tiles, so keep it simple.
Yes. The output is plain text inside a real anchor tag, which means screen readers announce the link, the button text is selectable, and color-contrast tools can verify it. The VML version is hidden from accessibility tools by default — only the visual rendering uses it.