Bulletproof email button

What it solves

A button made from a background image or a styled link alone can disappear: Outlook on Windows ignores border-radius and padding on anchors, and some clients block images. This pattern keeps the call to action tappable and readable everywhere.

How it works

The outer table cell holds the background colour through the bgcolor attribute, which every client honours. Inside, two paths are chosen with conditional comments. Outlook (the mso condition) gets a VML roundrect, a Microsoft drawing shape that supports rounded corners and a real clickable area through the href attribute. Every other client gets a normal anchor styled as inline-block with generous padding, so the whole rectangle is the link, not just the text.

A second, outlined variant shows how to build a secondary action using a border on the cell.

Adapting it

• Change the colour in four places: the bgcolor, the VML fillcolor, the anchor background and its border.
• Match the VML width and height to the size the anchor takes; the arcsize percentage controls the corner radius.
• Keep the label short, ideally under four words.

Pitfalls

• Pasting the VML into non-Outlook-aware tooling can strip the comments; test the final compiled HTML.
• Keep contrast at least 4.5:1 between label and background.
• Buttons need a minimum height of about 44px for touch.
• If the label wraps on mobile, shorten it instead of shrinking the font.

1. Save the markup as a partial in your email templates folder.
2. Include it wherever a call to action is needed and set the link in both the VML and anchor.
3. Update the fill colour in all four places listed in the explanation.
4. Use the matching width for the Outlook shape, then preview in an Outlook client or a testing service.