Bulletproof Email Buttons for Outlook: VML + Accessible HTML

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 …


This content originally appeared on DEV Community and was authored by 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.


This content originally appeared on DEV Community and was authored by Ana Elena Ulate Salas


Print Share Comment Cite Upload Translate Updates
APA

Ana Elena Ulate Salas | Sciencx (2025-09-05T02:41:34+00:00) Bulletproof Email Buttons for Outlook: VML + Accessible HTML. Retrieved from https://www.scien.cx/2025/09/05/bulletproof-email-buttons-for-outlook-vml-accessible-html/

MLA
" » Bulletproof Email Buttons for Outlook: VML + Accessible HTML." Ana Elena Ulate Salas | Sciencx - Friday September 5, 2025, https://www.scien.cx/2025/09/05/bulletproof-email-buttons-for-outlook-vml-accessible-html/
HARVARD
Ana Elena Ulate Salas | Sciencx Friday September 5, 2025 » Bulletproof Email Buttons for Outlook: VML + Accessible HTML., viewed ,<https://www.scien.cx/2025/09/05/bulletproof-email-buttons-for-outlook-vml-accessible-html/>
VANCOUVER
Ana Elena Ulate Salas | Sciencx - » Bulletproof Email Buttons for Outlook: VML + Accessible HTML. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/09/05/bulletproof-email-buttons-for-outlook-vml-accessible-html/
CHICAGO
" » Bulletproof Email Buttons for Outlook: VML + Accessible HTML." Ana Elena Ulate Salas | Sciencx - Accessed . https://www.scien.cx/2025/09/05/bulletproof-email-buttons-for-outlook-vml-accessible-html/
IEEE
" » Bulletproof Email Buttons for Outlook: VML + Accessible HTML." Ana Elena Ulate Salas | Sciencx [Online]. Available: https://www.scien.cx/2025/09/05/bulletproof-email-buttons-for-outlook-vml-accessible-html/. [Accessed: ]
rf:citation
» Bulletproof Email Buttons for Outlook: VML + Accessible HTML | Ana Elena Ulate Salas | Sciencx | https://www.scien.cx/2025/09/05/bulletproof-email-buttons-for-outlook-vml-accessible-html/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts