Outlook VML Buttons and Dark Mode Rendering

• VML is deprecated as a web technology, but still matters in email because classic Outlook for Windows uses Word-style rendering.
• VML should be treated as a Word/MSO fallback technique, not a general-purpose email design layer.
• VML is only relevant for classic Outlook for Windows and Microsoft 365 classic Outlook for Windows.
• New Outlook for Windows, Outlook.com, Outlook for Mac and Outlook mobile should not be treated as VML clients.
• Most bulletproof buttons use a hybrid structure: VML inside MSO conditionals plus an HTML/CSS <a> button for everyone else.
• Classic Outlook dark mode can preserve VML fills or VML images while transforming live text, HTML backgrounds or CSS borders.
• That split can cause two-tone button patches, fill/text mismatches and border/fill mismatches.
• fillcolor, strokecolor, inline CSS, bgcolor and live text can be processed differently.
• mso-color-alt:auto is a specialised text workaround with body/fill colour constraints, not a universal fix.
• Nested VML is fragile; a VML button inside a VML background image is a common classic Outlook failure path.
• VML remains useful, but only as a scoped legacy fallback.
• Accessibility matters: keep CTA text live and avoid image-only buttons.
• Test classic Outlook Windows, new Outlook, Outlook.com, Mac and mobile separately.

These snippets are examples, not drop-in guarantees. Test the final compiled HTML in the Outlook clients that matter to your audience.

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:w="urn:schemas-microsoft-com:office:word"
  href="https://example.com"
  arcsize="12%"
  fillcolor="#4f46e5"
  strokecolor="#4f46e5"
  style="height:44px;v-text-anchor:middle;width:220px;">
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Call to action</center>
</v:roundrect>
<![endif]-->

<a href="https://example.com"
  style="background-color:#4f46e5;border:1px solid #4f46e5;border-radius:6px;color:#ffffff;display:inline-block;line-height:44px;text-align:center;text-decoration:none;width:220px;mso-hide:all;">
  Call to action
</a>

<!--[if mso]>
<style>
  .mso-transparent-bg {
    background: transparent !important;
  }
</style>
<![endif]-->

<a href="https://example.com"
   style="background:rgba(79,70,229,1);border:1px solid #4f46e5;color:#ffffff;display:inline-block;line-height:44px;text-align:center;text-decoration:none;width:220px;">
  Call to action
</a>

<a href="https://example.com"
   style="background-color:#4f46e5;border:1px solid transparent;border-radius:6px;color:#ffffff;display:inline-block;line-height:44px;text-align:center;text-decoration:none;width:220px;">
  Call to action
</a>

<!--[if mso]>
<style>
  .mso-auto-text {
    mso-color-alt: auto;
  }
</style>
<![endif]-->

<!--[if mso]>
<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#4f46e5">
<![endif]-->

<a href="https://example.com" class="button">
  Call to action
</a>

<!--[if mso]>
    </td>
  </tr>
</table>
<![endif]-->

• Bulletproof buttons are usually better than image-only CTAs because they preserve live text.
• Screen readers and keyboard users need meaningful links, not decorative button images.
• VML can introduce accessibility complications, so keep the real CTA as a meaningful <a> where possible.
• Keep the VML href and HTML anchor href aligned so the same CTA destination is exposed in every branch.
• Links inside VML-heavy background sections can be harder to keyboard-test in classic Outlook, so verify focus and click behaviour where possible.
• Avoid duplicate or competing links if the VML href and HTML anchor diverge.
• Use clear link text that still makes sense when the surrounding design changes.