Bulletproof Email Buttons for Outlook: VML + Accessible HTML

[Ana Elena Ulate Salas]

TL;DR​

Email buttons break because Outlook for Windows uses the Word rendering engine. The reliable fix is a hybrid button: VML for Outlook + semantic, accessible HTML/CSS for everyone else. Below you’ll find copy-paste-ready snippets (fixed width & auto width), plus a Liquid-ready version for ESPs like Braze.

Why this matters​

• Outlook for Windows ignores most modern CSS and needs VML shapes to render buttons consistently.
• Accessibility: readers using screen readers or high contrast modes need proper roles, labels, and focusable links.
• Consistency: avoid “only the text is clickable” or blue/underlined text in some clients.

Anatomy of a bulletproof button​

• Wrapper table (role="presentation")for layout safety.
• VML <v:roundrect> inside <!--[if mso]> ... <![endif]--> for Outlook desktop.
• *HTML * <a> fallback for all other clients with inline styles.
• Accessibility: role="button", clear link text, aria-label (optional if text is descriptive), sufficient color contrast.
• Touch target: at least** 44×44px** tappable area (line-height or height + padding).
• Full clickability: display:inline-block (or block) and no nested conflicting links.

Paste-ready: Fixed-width button (easiest)​

<!-- Button : BEGIN -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center">
      <!--[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:240px;"
                   arcsize="12%"
                   fillcolor="#1268FB"
                   strokecolor="#1268FB">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;">
          Get started
        </center>
      </v:roundrect>
      <![endif]-->

      <!--[if !mso]><!-- -->
      <a href="https://example.com"
         target="_blank"
         role="button"
         style="background-color:#1268FB;border:1px solid #1268FB;border-radius:6px;
                color:#ffffff;display:inline-block;font-family:Arial,Helvetica,sans-serif;
                font-size:16px;font-weight:bold;line-height:48px;text-align:center;
                text-decoration:none;width:240px;-webkit-text-size-adjust:none;mso-hide:all;">
        Get started
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
<!-- Button : END -->

Why it works:

• Outlook uses the VML rectangle (full-area clickable).
• Other clients render the <a> with a fixed width and 48px line-height (meets the 44px touch target).

Paste-ready: Auto-width (padding-based) button​

<!-- Button (auto width) : BEGIN -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
                   href="https://example.com"
                   style="height:48px;v-text-anchor:middle;width:200px;"
                   arcsize="12%"
                   fillcolor="#0B5BD3"
                   strokecolor="#0B5BD3">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;">
          View details
        </center>
      </v:roundrect>
      <![endif]-->

      <!--[if !mso]><!-- -->
      <a href="https://example.com"
         target="_blank"
         role="button"
         aria-label="View details"
         style="background-color:#0B5BD3;border:1px solid #0B5BD3;border-radius:6px;
                color:#ffffff;display:inline-block;font-family:Arial,Helvetica,sans-serif;
                font-size:16px;font-weight:bold;line-height:48px;text-align:center;
                text-decoration:none;padding:0 24px;-webkit-text-size-adjust:none;mso-hide:all;">
        View details
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
<!-- Button (auto width) : END -->

Notes:

• For Outlook (VML) we must still set a width; pick a reasonable default (e.g., 200–240px).
• Non-Outlook clients will expand with padding: 0 24px.

Accessibility checklist (quick)​

• Color contrast ≥ 4.5:1 (text vs background).
• Meaningful text: avoid “Click here”.
• role="button" helps screen readers interpret intent.
• Focus order: keep CTAs in a logical reading order.
• No image-only buttons; if you must, add alt text and a real text link nearby.

Dark mode & link styling tips​

• Keep inline color:#ffffff; text-decoration:none; on the <a>.
• Avoid relying on background images.
• Test in Outlook dark mode (recent versions may invert colors; prefer solid brand colors with sufficient contrast).
• To prevent iOS auto-link styling inside buttons, ensure your <a> has explicit color and `text-decoration:none.

Common pitfalls (and fixes)​

• Only text is clickable → Ensure the <a> is display:inline-block (or block) and not wrapped by another conflicting <a>.
• Extra underlines in Gmail → Add text-decoration:none; inline on the <a>.
• Font shrinks on mobile → Add -webkit-text-size-adjust:none; inline.
• Rounded corners not showing in Outlook → That’s normal; Outlook uses the VML shape for rounding.

Continue reading...

 

Join 𝕋𝕄𝕋 on Telegram
Channel PREVIEW: