# Bulletproof CTA Buttons in AcelleMail (Outlook-Safe)

> AcelleMail's drag-and-drop Button widget generates Outlook-safe VML automatically. This guide covers when the widget is enough, when you need hand-coded VML, and the exact pattern for custom HTML templates.

- Canonical URL: https://acellesend.com/kb/articles/bulletproof-cta-buttons-for-outlook
- Author: Sofia Lindqvist, Email Marketing Editor
- Category: Email Design & Content — HTML email, responsive design, dark mode, accessibility, content strategy
- Content type: tutorial · Difficulty: intermediate
- Tags: Acellemail
- Published: 2026-01-18 · Last updated: 2026-08-15
- Reading time: 7 min
- Publisher: AcelleMail Knowledge Base, https://acellesend.com/kb

---

## 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](https://acellesend.com/kb/articles/creating-your-first-email-campaign-in-acellemail) 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:

```html
<!--[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

| Attribute | Effect | Typical value |
|---|---|---|
| `href` | Click destination URL (include UTMs!) | Full URL with query string |
| `style="height:44px"` | Button height in pixels | 40-48px (tappable on mobile) |
| `style="width:220px"` | Button width | Match your CSS `<a>` padding visually |
| `arcsize` | Corner radius as % of height | 10% ≈ 4px radius; 50% = pill shape |
| `fillcolor` | Background colour | Match your CSS `background-color` |
| `v-text-anchor:middle` | Vertical centre text | Always set |
| `<w:anchorlock/>` | Make the entire box clickable | Always include |

## Match the CSS and VML values

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

| CSS (`<a>`) | VML (`<v:roundrect>`) | Why |
|---|---|---|
| `background-color: #0066cc` | `fillcolor="#0066cc"` | Same button color |
| `border-radius: 4px` | `arcsize="10%"` (for 40px-tall button) | 10% of 40px = 4px |
| `line-height: 44px` | `style="height:44px"` | Same height |
| `padding: 0 24px` | `style="width:220px"` (≈ text width + 48px padding) | Visual width match |
| `font-family: Arial...` | `style="font-family:Arial..."` (inside `<center>`) | Same font |
| `color: #ffffff` | `style="color:#ffffff"` (inside `<center>`) | Same text color |

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):

| Version | % of Outlook opens | Renders VML | Renders modern CSS |
|---|---|---|---|
| Outlook 2007-2019 desktop | ~30-40% | ✅ Yes | ❌ No |
| Outlook 2021 desktop | ~10% | ✅ Yes | Partial |
| "New Outlook" desktop (2022+) | ~10% | Ignored | ✅ Yes |
| Outlook for Mac | ~5% | Ignored | ✅ Yes |
| Outlook web | ~30-40% | Ignored | ✅ Yes |

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:

| Pipeline stage | Could break | Check |
|---|---|---|
| Spintax processing | `{...|...}` patterns inside CSS | Wrap CSS curly braces in spintax-safe escaping (rare in buttons) |
| Click-tracking wrap | Replaces `href` with a redirect URL | UTMs should pass through; verify |
| Inline-style copying | Sometimes strips Outlook-specific attributes | Test in actual Outlook |

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 you see | What to do |
|---|---|
| Button looks correct in Apple Mail, blue underlined text in Outlook | Outlook is ignoring your CSS. Add the VML fallback (or switch to the Button widget). |
| Button text is centered horizontally but stuck at top in Outlook | Missing `v-text-anchor:middle`. Add it. |
| Button "outline" shows in Outlook even though you set `border: none` | Outlook adds default border to `<a>` tags. Use the VML `<v:roundrect>` path — it has no inherent border. |
| Modern "New Outlook" shows the button twice (once VML, once CSS) | Your conditional comments are malformed. `<!--[if mso]>` must wrap the VML; `<!--[if !mso]><!-->` must wrap the CSS. |
| Button width different in Outlook vs Gmail | VML width is fixed pixels; CSS `<a>` width is content + padding. Match by setting VML width = (CSS text width) + (CSS left+right padding). |
| Button text wraps in Outlook but not Gmail | Outlook wraps if text + padding exceeds VML width. Increase the VML `width` value. |

## 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](https://acellesend.com/kb/articles/creating-your-first-email-campaign-in-acellemail)
- [Email Rendering Across Clients](https://acellesend.com/kb/articles/understanding-email-client-rendering-differences)
- [Email Copy That Converts](https://acellesend.com/kb/articles/how-to-write-email-copy-that-converts)
- [Setting Up UTM Parameters for Campaign Tracking](https://acellesend.com/kb/articles/setting-up-utm-parameters-for-email-campaign-tracking)

---

## Related articles

- [Dark Mode Email Design](https://acellesend.com/kb/articles/dark-mode-email-design): When a recipient reads your email in dark mode, mail clients silently invert your colors — sometimes correctly, sometimes destructively. White logos disappear; black logos become white-on-light-grey; carefully-chosen brand colors get auto-shifted. This guide walks the 4 patterns that survive dark mode (color-scheme meta, prefers-color-scheme media query, transparent PNGs with dark-friendly fills, branded dark fallback) plus the testing protocol.
- [Mobile-First Email Principles](https://acellesend.com/kb/articles/mobile-first-email-principles): More than 60% of email opens happen on mobile devices. Designing the desktop version first then "checking mobile" gives you a desktop email that's tolerable on mobile. Designing mobile-first gives you a mobile email that looks great on desktop. This guide walks the 6 principles that produce mobile-friendly templates from the start — single column, 16px body, 44px tap targets, 600px max, finger-friendly padding, image scaling.
- [Email Accessibility: WCAG Best Practices for Bulk Email](https://acellesend.com/kb/articles/email-accessibility-wcag-best-practices-for-bulk-email): Roughly 15% of your subscribers have a permanent or situational disability that affects how they read email — screen reader users, low-vision readers, color-blind users, motor-impaired clickers, cognitive-load-sensitive readers. The European Accessibility Act took effect 2025-06-28 with real fines; US ADA-equivalent enforcement is rising. Beyond compliance, accessible email gets ~10-25% better engagement across all readers. This guide walks the seven structural rules, the inline-style techniques email clients enforce, the screen-reader test pattern, and the WCAG 2.2 AA criteria that actually translate to bulk email.
- [BIMI with VMC — Cost, Process, and Whether It's Worth It](https://acellesend.com/kb/articles/bimi-with-vmc-cost-walkthrough): VMC (Verified Mark Certificate) costs $1,500/yr per domain and takes 4-8 weeks to obtain. This guide walks the cost math, the trademark requirements, the alternative paths, and a decision framework for whether VMC is right for your sending program.
- [Building Your Email Marketing SaaS](https://acellesend.com/kb/articles/building-your-email-marketing-saas): The technology side of an AcelleMail SaaS is solved. The hard part is the business: who you sell to, how you price, how you reach them, and how you keep them. This guide is the GTM + pricing playbook — opinionated, market-tested patterns for launching an email-marketing SaaS on the AcelleMail stack.