HTML Email Architecture

Bulletproof HTML Email Buttons: VML vs CSS Padding

Your Call to Action (CTA) button is the single most critical element in your email campaign. Learn why web-standard buttons fail in Outlook, and master the two bulletproof coding techniques used by top email engineers.

Why Standard CSS Buttons Break in Outlook

On regular websites, you create a button with simple CSS:

<a href="https://example.com" style="background:#007bff; padding:12px 24px; border-radius:6px; color:#fff;">Click Here</a>

In Microsoft Outlook (2016 through 365 on Windows), this code fails catastrophically:

  • Padding collapses: The background shrinks tightly to the text characters, creating an unreadable sliver of color.
  • Border-radius is deleted: Corners become harsh 90-degree angles.
  • Only text is clickable: The padding area does not trigger the link, causing high click drop-off on touchscreens.

The Bulletproof Architecture: VML for Outlook + Table Padding for Others

The industry gold standard utilizes a dual-render approach: an MSO-conditional VML vector shape for desktop Outlook, and a padding-based HTML table cell for modern clients (Apple Mail, Gmail, Yahoo, iOS, and Android):

<div>
  <!--[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:44px;v-text-anchor:middle;width:200px;" arcsize="14%" stroke="f" fillcolor="#007bff">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
      Claim Discount &rarr;
    </center>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-->
  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: separate !important; margin: 0 auto;">
    <tr>
      <td align="center" bgcolor="#007bff" style="border-radius: 6px; background-color: #007bff;">
        <a href="https://example.com" target="_blank" style="color: #ffffff; text-decoration: none; display: block; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; padding: 12px 28px; border-radius: 6px;">
          Claim Discount &rarr;
        </a>
      </td>
    </tr>
  </table>
  <!--<![endif]-->
</div>

Critical Attributes Explained

arcsize="14%"

Calculates the corner curve in VML. 50% produces a pill-shaped button; 0% produces sharp square corners.

v-text-anchor: middle

Ensures text is vertically centered within the Word vector box, avoiding awkward baseline clipping.

display: block on <a>

Expands the hyperlink touch area across the entire table cell padding, making the whole button clickable.

bgcolor on <td>

Required for Outlook.com and older webmail clients that occasionally strip background-color CSS properties.

Button Coding Frequently Asked Questions

Why does Microsoft Outlook ignore border-radius and padding on standard link tags?

Windows desktop Outlook (2016, 2019, 2021, and 365) renders HTML using Microsoft Word rather than a modern web browser engine. Word treats <a> anchor tags as inline text elements and ignores standard CSS box-model properties like padding, width, height, and border-radius.

What is VML and why is it required for Outlook buttons?

Vector Markup Language (VML) is an XML-based vector graphics format developed by Microsoft in 1998. Because Microsoft Word natively understands VML shapes, coding a <v:roundrect> element provides rounded corners, background colors, and exact dimensions in desktop Outlook.

How do I make email buttons expand to 100% width on mobile screens?

Wrap your button in a table with class="mobile-button-full" and write a responsive media query (@media only screen and (max-width: 600px)) setting width: 100% !important and display: block !important. This expands the clickable touch area for fingertips.

Generate Bulletproof Buttons in 1-Click

I WANT EMAILER automatically generates dual VML and table markup for every button you drag onto the canvas.

Build Buttons Free