Bulletproof CTA Buttons for Outlook

The Outlook Button Problem#

Outlook on Windows uses Microsoft Word as its rendering engine, which ignores CSS border-radius, background-color on <a> tags, and most modern CSS. The only reliable solution is VML (Vector Markup Language).

The Bulletproof Button Code#

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:w="urn:schemas-microsoft-com:office:word"
  href="https://example.com/cta"
  style="height:44px; width:200px; v-text-anchor:middle;"
  arcsize="10%"
  fillcolor="#0066cc">
  <w:anchorlock/>
  <center style="color:#ffffff; font-family:Arial,sans-serif; font-size:16px; font-weight:bold;">
    Shop Now
  </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com/cta"
   style="background-color:#0066cc; border-radius:4px; color:#ffffff;
          display:inline-block; font-family:Arial,sans-serif; font-size:16px;
          font-weight:bold; line-height:44px; padding:0 24px; text-decoration:none;">
  Shop Now
</a>
<!--<![endif]-->

Key Parameters#

AcelleMail Template Tip#

Save this as a block in AcelleMail's template library. When editing a campaign, insert the block and update only the href and label text — no need to re-code VML each time.