Buttons

Buttons in HTML emails can be created with simple table structures with an anchor inside, or through advanced techniques involving VML or mso- CSS, for fully-clickable buttons in Outlook for Windows.

We can use a smart combination of basic and 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-4 px-6 text-sm/none font-semibold rounded no-underline text-white bg-indigo-500 hover:bg-indigo-600"
>
<outlook>
<i class="mso-font-width-[150%] mso-text-raise-[26pt]">&nbsp;</i>
</outlook>
<span class="mso-text-raise-[13pt]">Read more</span>
<outlook>
<i class="mso-font-width-[150%]">&nbsp;</i>
</outlook>
</a>

As you can see 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 <i> elements that use mso-font-width with a &emsp; to grow in width; these elements are wrapped in conditional comments, so they only show in Outlook and Windows 10 Mail
  • the text label is wrapped in a <span> and mso-text-raise adjusts its vertical position, allowing us to control the top padding
  • the first <i> also adds bottom padding

VML

Another approach to buttons in HTML email is coding them with VML, Microsoft's obsolete and deprecated Vector Markup Language.

buttons.cm, a tool by Campaign Monitor, makes it easy to generate a VML button.

However, you should keep in mind that VML buttons:

  • have a larger code footprint
  • must have a fixed width and height
  • require that you add the URL in two places
  • are converted to an image, which can degrade accessibility for screen reader users
  • cannot be nested inside other VML elements (for example, background images for Outlook require VML, so you can't place a VML button on top of a background image for Outlook)

These limitations make VML buttons inaccessible, less flexible, and harder to maintain.

Rounded corners in Outlook

Probably the only reason you'd want to use a VML button is because it's the only way to achieve rounded button corners in Outlook for Windows.

Here is a simplified VML button with rounded corners, styled with Tailwind CSS:

vml-rounded-button.html
<!--[if mso]>
<v:roundrect arcsize="50%" style="height: 48px; mso-wrap-style: none;" stroke="f" fillcolor="#1d4ed8">
<![endif]-->
<a
href="https://example.com/"
class="inline-block p-0 px-6 text-base/10 rounded-md no-underline text-white bg-blue-700"
>
<outlook>
<i class="mso-font-width-[150%] mso-text-raise-[26pt]">&nbsp;</i>
</outlook>
<span>Link Text</span>
<outlook>
<i class="mso-font-width-[150%]">&nbsp;</i>
</outlook>
</a>
<!--[if mso]>
</v:roundrect>
<![endif]-->

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 visual 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 VML buttons, the main trade-off being accessibility: the click area in Outlook is not ideal.

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 mso-padding-alt-[12px_24px]">
<a
href="https://maizzle.com"
class="block py-4 px-6 text-white text-sm/[100%] no-underline"
>
Button
</a>
</th>
</tr>
</table>

Outlined

No background color, so it inherits its container's background (gray 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="block border-2 border-indigo-500 hover:bg-indigo-500 rounded mso-padding-alt-[12px_24px]">
<a
href="https://maizzle.com"
class="block py-3 px-6 text-sm/[100%] text-indigo-500 hover:text-white no-underline"
>
Button
</a>
</th>
</tr>
</table>

Pill

Pill buttons simply use a larger border-radius value.

<table>
<tr>
<th class="bg-indigo-500 hover:bg-indigo-600 shadow-md rounded-full mso-padding-alt-[16px_24px]">
<a
href="https://maizzle.com"
class="block py-3 px-6 text-sm/none text-white no-underline"
>
Button
</a>
</th>
</tr>
</table>
Copyright © 2024 Maizzle SRLBrand policy
Edit this page on GitHub