Definition
The bulletproof button is a technique for creating call-to-action buttons in email that render consistently across every major email client, including Outlook's restrictive Word rendering engine. The technique combines a VML v:roundrect element for Outlook with a standard HTML <a> tag button for all other clients. This approach emerged around 2014 as a replacement for image-based buttons and the limited Outlook button renderer.
The VML component of the bulletproof button uses v:roundrect with v:fill and v:stroke to create a rectangular shape with rounded corners that Outlook renders natively. The arcsize attribute controls the corner radius. A v:fill element can set the background colour or gradient. The HTML component is an <a> tag with inline CSS for padding, background colour, border-radius, font styling, and text colour. Modern clients process the HTML button while Outlook processes the VML version.
A complete bulletproof button template includes several layers: an outer <div> that conditions on <!--[if mso]>, the VML v:roundrect with all styling attributes, a VML v:fill and v:stroke for visuals, the link URL and text, the closing VML tags, the <!--[if !mso]><!--> conditional for non-Outlook clients, a standard <a> tag with inline button styles, and a closing <!--<![endif]-->. The padding attribute on the VML element is essential for creating sufficient clickable area in Outlook.
Best Practices
Use the bulletproof button pattern for all primary calls to action. Image-based buttons fail when images are blocked (43% of opens), and standard HTML buttons may lose styling in Outlook without VML.
Set padding on the VML v:roundrect element to ensure sufficient clickable area in Outlook. A minimum of 10px vertical and 20px horizontal padding is recommended for comfortable clicking.
Include a v:fill element with the desired background colour. Outlook ignores CSS background-colour on anchor tags, so the VML fill is the only way to colour the Outlook button.
Set arcsize on the v:roundrect to control corner rounding. Values between 10% and 20% produce standard rounded corners. Use arcsize="0" for square buttons or omit it entirely for the default.
Test bulletproof buttons in every version of Outlook. Button rendering can vary between Outlook 2010, 2013, 2016, 2019, and 365, and VML attributes may behave differently across versions.
Related Glossary Terms
CSS in Email
The subset of CSS properties supported across email clients, dominated by inline styles and constrained by Gmail and Outlook limitations.
Email Background Image
A background image applied to an email's table cell or container, requiring VML fallbacks for Outlook due to its lack of CSS background-image support.
Email Conditional
Proprietary conditional comments used to target Microsoft Outlook with specific HTML or VML code for cross-client email rendering.
Email Graceful Degradation
An email design strategy that starts with a feature-rich layout and systematically reduces complexity for clients with limited rendering capabilities.
Email Hybrid Coding
A responsive email development approach combining table-based layouts for Outlook with div-based fluid techniques for modern clients.
Email MJML
An open-source framework that abstracts responsive email coding into simple components, compiling to production-ready HTML with cross-client compatibility.
Frequently Asked Questions
The term "bulletproof" describes the button's reliability across all email clients. Unlike image buttons (which break when images are blocked) or standard HTML buttons (which lose styling in Outlook), the VML-HTML hybrid technique ensures consistent rendering in every client.
Yes, but only the HTML portion. Outlook for Mac uses WebKit, not Word's engine, so it ignores the VML conditional and renders the standard `` tag button. This works well because Outlook for Mac supports `border-radius` and `background-colour`.
Yes. The VML `v:fill` element supports gradients via its `type` attribute. Set `type="gradient"` with `color` and `color2` attributes for a two-colour gradient. Non-Outlook clients can use CSS `linear-gradient` for the HTML button.
The VML `v:roundrect` padding attribute sets the interior spacing in pixels. A minimum of `padding: 10px 20px` creates a comfortably clickable button. Smaller paddings may cause text to touch the button edge or make the clickable area too small.
No. Without VML, Outlook renders HTML buttons without `border-radius`, often with incorrect padding and background colours. The VML component is essential for Outlook compatibility. The HTML component alone is not bulletproof.