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)

Credit goes to @M_J_Robbins for this technique.

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   character is reset (as in, canceled) through the mso-font-width property

Line breaks and spaces between tags in the example above might render the button larger (although barely noticeable). If you want your button to be absolutely pixel perfect, just remove them.

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>

Outlook doesn't support border-radius, it will render square corners.

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>