Buttons

Buttons in HTML email can be created with simple table structures with an anchor inside, or advanced techniques involving VML or even mso- CSS, for fully-clickable buttons in Outlook and Windows 10 Mail 🤯

Bulletproof

Bulletproof buttons in HTML email traditionally refer to buttons that are fully clickable in all email clients, including Outlook and Windows 10 Mail.

Semantic (CSS)

We can use a smart combination of basic and (Outlook) vendor CSS properties to get fully clickable buttons in HTML - no VML required!

Here's the Filled button, fully clickable in Outlook:

<a 
  href="https://maizzle.com/"
  class="inline-block py-16 px-24 text-sm leading-none no-underline text-white font-semibold rounded bg-indigo-500 hover:bg-indigo-600">
  <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%; mso-text-raise: 26pt;">&nbsp;</i><![endif]-->
    <span style="mso-text-raise: 13pt;">Read more</span>
  <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%;">&nbsp;</i><![endif]-->
</a>

It's just a simple <a> tag, but with some nifty workarounds for Outlook's lack of support for padding on inline elements:

  • left/right padding is faked with a <i> elements that use letter-spacing to grow in width; these elements are wrapped in conditional comments, so they only show in Outlook and Windows 10 Mail
  • text is wrapped in a <span> and mso-text-raise adjusts its vertical position
  • the first <i> uses double the pt that the <span> uses
  • finally, the width of the &nbsp; character is reset (as in, canceled) through the mso-font-width property

Tip: use the <outlook> tag for cleaner-looking, editor-friendly markup. As an added bonus, you can also use Tailwind utilities with it:

<a 
  href="https://maizzle.com/"
  class="inline-block py-16 px-24 text-sm leading-none no-underline text-white font-semibold rounded bg-indigo-500 hover:bg-indigo-600">
  <outlook>
    <i class="tracking-24" style="mso-font-width: -100%; mso-text-raise: 26pt;">&nbsp;</i>
  </outlook>
    <span style="mso-text-raise: 13pt;">Read more</span>
  <outlook>
    <i class="tracking-24" style="mso-font-width: -100%;">&nbsp;</i>
  </outlook>
</a>

Traditional (VML)

The classic approach to bulletproof buttons is coding them with VML, and Campaign Monitor has a very useful tool for this.

However, VML buttons have a larger code footprint, are fixed in size and require you add the URL in two places, which makes them less flexible and harder to maintain.

Table-based

A simple table structure, with background color set on the cell.

For modern email clients, we use CSS padding on the <a> to make the entire button clickable. In Outlook and Windows 10 Mail, because CSS padding isn't supported on anchor tags, the MSO mso-padding-alt CSS property can be used on the table cell in order to preserve the aspect.

This means that in Outlook/Windows 10 Mail only the text itself will be clickable.

Table-based buttons are easier to code and maintain than bulletproof buttons, the main trade-off being accessibility: they provide smaller-than-suggested click/touch area in some email clients.

Filled

The most common type of button.

For an extra touch, let's add rounded corners and a hover effect:

<table>
  <tr>
    <th class="bg-indigo-500 hover:bg-indigo-600 rounded" style="mso-padding-alt: 12px 48px;">
      <a href="https://maizzle.com" class="block text-white text-sm leading-full py-12 px-48 no-underline">Button</a>
    </th>
  </tr>
</table>

Outlined

No background color, so it inherits its container's background (white in our case). We add a colored border to the table cell to create the outline.

To make it more interesting, let's also change the background on hover:

<table>
  <tr>
    <th class="border-2 border-indigo-500 hover:bg-indigo-500 block rounded" style="mso-padding-alt: 12px 48px;">
      <a href="https://maizzle.com" class="block text-sm text-indigo-500 hover:text-white leading-full py-12 px-48 no-underline">Button</a>
    </th>
  </tr>
</table>

Pill

Pill simply buttons use a larger border-radius value.

<table>
  <tr>
    <th class="bg-indigo-500 hover:bg-indigo-600 shadow-md rounded-full" style="mso-padding-alt: 12px 48px;">
      <a href="https://maizzle.com" class="block text-sm text-white leading-full py-12 px-48 no-underline">Button</a>
    </th>
  </tr>
</table>