Bulletproof CTA Buttons in AcelleMail (Outlook-Safe)

What this is for#

The cheapest way to ruin an email design is a CTA button that looks great in Apple Mail and Gmail — then renders as plain blue text in Outlook on Windows. This is not your fault — it's because Outlook 2007-2019 uses Microsoft Word as its HTML rendering engine, which ignores CSS border-radius, background-color on <a> tags, and most modern CSS.

The fix is VML (Vector Markup Language) — Microsoft's pre-HTML5 graphics language that Word respects. AcelleMail's drag-and-drop Button widget generates this automatically. If you hand-code custom HTML, you write it yourself.

Path 1 — Use the Button widget (recommended)#

If you build emails in AcelleMail's drag-and-drop builder, you don't need to think about VML. The Button widget (one of the 12 Basic widgets) generates a bulletproof button — Outlook-safe HTML with VML fallback baked in.

How:

1. Open your campaign at the Template step
2. Click Open email builder
3. From the right palette, drag Button onto the canvas
4. Click the placed button → side panel opens
5. Configure: text, URL, colour, corner radius, padding
6. Save

The builder handles every Outlook quirk for you. For 95% of campaigns, this is the right answer.

See the first-campaign walkthrough for the Template-step screenshot showing the button widget in context.

Path 2 — Hand-coded VML (custom HTML templates)#

If you import a custom HTML email (Template step → Change template → Use HTML editor → paste your own HTML), AcelleMail doesn't post-process the markup. You write the bulletproof code yourself.

The canonical bulletproof button pattern:

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:w="urn:schemas-microsoft-com:office:word"
  href="https://yoursite.com/cta?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale_2026&utm_content=primary_cta"
  style="height:44px; width:220px; 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 the sale
  </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://yoursite.com/cta?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale_2026&utm_content=primary_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 the sale
</a>
<!--<![endif]-->

How it works:

• <!--[if mso]>...<![endif]--> is a Microsoft Office (Word/Outlook) conditional comment. Code inside is ONLY parsed by Outlook desktop. Other clients ignore it.
• <v:roundrect> is the VML shape Outlook respects — a rounded rectangle with fillcolor and arcsize.
• <!--[if !mso]><!-->...<!--<![endif]--> is the inverse — code visible to every client EXCEPT Outlook desktop.
• The plain <a> inside the second block uses normal CSS that Apple Mail / Gmail / Outlook web understand.

End result: Outlook sees the VML; every other client sees the CSS <a>. Same visual outcome.

Key VML attributes — what each does#

Match the CSS and VML values#

Both blocks render in different clients but should look IDENTICAL. Match these pairs:

If the two blocks disagree visually, your design feels "off" in Outlook only — a hard bug to spot.

When modern Outlook handles border-radius natively#

Outlook for Mac (any version) and Outlook for Windows "New Outlook" (2022+) DO support modern CSS including border-radius. They render the <a> correctly without VML.

Distribution of Outlook versions (rough):

The 30-40% on legacy desktop is the reason VML still matters. Audiences shrink as Microsoft migrates users, but until that's <5%, write the VML fallback.

AcelleMail-specific gotcha — preserve raw HTML#

If you paste bulletproof HTML into AcelleMail's HTML editor, AcelleMail's compile pipeline shouldn't touch your VML — but always test. Send yourself a test campaign and view in real Outlook (or use a multi-client previewer like Litmus).

The places where AcelleMail's pipeline might interfere:

If something breaks, file a bug. The drag-and-drop Button widget is the safer path until then.

Save as a reusable template block#

The bulletproof pattern is verbose. Save it once + reuse forever:

1. Build one email with the bulletproof button (using the canonical pattern above)
2. Templates → + Create template → save this email as a reusable template
3. Future campaigns: pick the template → swap out the href + text → save
4. Or: save just the button HTML block separately (in your team wiki) for paste-and-replace into custom HTML emails

After one round of setup, every future button reuses the proven code.

Common issues#

What NOT to do#

• Don't put your CTA in a background image. Outlook ignores background images, AND image-blocking by default in some clients means subscribers see nothing.
• Don't use a button image (PNG/JPG button with the text rendered as graphics). Image-blocking shows alt-text, font scaling won't work, and accessibility is worse.
• Don't skip the VML for B2B audiences. Outlook desktop is dominant in enterprise. Skipping the fallback breaks 40%+ of business audiences.
• Don't test in just one client. Send a test, open in real Apple Mail, real Gmail, real Outlook desktop, real Outlook web. Catching button rendering issues at design time costs minutes; catching after launch costs the campaign.

Related articles#

• Send Your First Campaign: 5-Step Wizard Walkthrough
• Email Rendering Across Clients
• Email Copy That Converts
• Setting Up UTM Parameters for Campaign Tracking