Buttons

Buttons in HTML email are usually simple table structures, with an anchor inside.

Filled

The common type of button, built with a table. For an extra touch, let's add rounded corners and a hover effect:

<table>
  <tr>
    <th class="bg-green-500 hover-bg-green-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>
Here's how that would look like: Button

Outlined

No background color, so it inherits its container's background. Instead, we add a colored border to the table cell.

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

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

Pill

Pill buttons use a larger border-radius value. Remember, Outlook doesn't support this:

<table>
  <tr>
    <th class="bg-green-500 hover-bg-green-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>
Example: Button

Look & feel

For modern email clients, CSS padding can be used to make the entire button clickable. In Outlook for Windows, 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 - however, this means that only the text itself will be clickable.

Not bulletproof

This technique makes customisation easy while still keeping your buttons looking the same across email clients.

However, it is not bulletproof.

Buttons in Outlook for Windows will only have the text clickable.

If you want fully-clickable buttons in Outlook for Windows too, take a look at Campaign Monitor's bulletproof email buttons ↗