People need things to click on

Buttons in Acorn are simple table structures with an anchor inside.

For modern email clients, CSS padding is used to make the entire button clickable. In Outlook, since CSS padding isn't supported on anchor tags, mso-padding-alt is used on the table cell in order to preserve the aspect - however, this means that only the text itself will be clickable.

This makes customisation easy while still looking great across email clients. But if you want fully-clickable buttons in Outlook for Windows, we highly recommend Campaign Monitor's bulletproof email buttons ↗

Filled

Your regular table-based button for email. Background colour is defined through the bgcolor="" attribute, and a border-radius is set inline on the table cell, for rounded button corners in email clients that support it.

Preview
Code

<!-- Default -->
<table cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <th bgcolor="#34BF49" style="border-radius: 3px; mso-padding-alt: 6px 42px 12px;">
      <a href="http://thememountain.com" style="color: #FFFFFF; display: inline-block; font-size: 13px; line-height: 100%; padding: 12px 42px; text-decoration: none;">Button label</a>
    </th>
  </tr>
</table>

<!-- Custom: center-aligned on mobile only -->
<table class="align-sm-center" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <th bgcolor="#34BF49" style="border-radius: 3px; mso-padding-alt: 6px 42px 12px;">
      <a href="http://thememountain.com" style="color: #FFFFFF; display: inline-block; font-size: 13px; line-height: 100%; padding: 12px 42px; text-decoration: none;">Button label</a>
    </th>
  </tr>
</table>

Outlined

Outlined buttons don't have background colour, so they'll inherit their container's background. A 2px solid border is used to highlight the element instead.

Preview
Code

<!-- Default -->
<table cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <th style="border: 2px solid #34BF49; border-radius: 3px; mso-padding-alt: 6px 42px 12px;">
      <a href="http://thememountain.com" style="color: #34BF49; display: inline-block; font-size: 13px; line-height: 100%; padding: 12px 42px; text-decoration: none;">Button label</a>
    </th>
  </tr>
</table>

<!-- Custom: Full width on mobile -->
<table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <th style="border: 2px solid #34BF49; border-radius: 3px; mso-padding-alt: 6px 42px 12px;">
      <a href="http://thememountain.com" class="col" style="color: #34BF49; display: inline-block; font-size: 13px; line-height: 100%; padding: 12px 42px; text-decoration: none;">Button label</a>
    </th>
  </tr>
</table>

Pill

Simply increase the border-radius on a Filled Button, to get a Pill Button.

Preview
Code

<table align="center" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
  <tr>
    <th bgcolor="#34BF49" style="border-radius: 50px; mso-padding-alt: 6px 42px 12px;">
      <a href="http://thememountain.com" style="color: #FFFFFF; display: inline-block; font-size: 13px; line-height: 100%; padding: 12px 42px; text-decoration: none;">Button label</a>
    </th>
  </tr>
</table>

Tip

Remove the background colour and add a border on a Pill Button <th>, to get an Outlined Pill Button.

Alignment

Mobile

In order to custom align a button for mobile-only, simply add one of the align-sm- classes on the button <table> tag. Check the Filled Button example ↑, it center-aligns the button only on mobile.

Desktop

You can custom-align a button for desktops and tablets through the use of the align="" attribute on the <table> tag. For centering, you will also need the margin: 0 auto; inline CSS. Of course, you can combine these with one of the mobile alignment classes:

Preview
Code

<table align="center" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
  <tr>
    <th bgcolor="#34BF49" style="border-radius: 50px; mso-padding-alt: 6px 42px 12px;">
      <a href="http://thememountain.com" style="color: #FFFFFF; display: inline-block; font-size: 13px; line-height: 100%; padding: 12px 42px; text-decoration: none;">Button label</a>
    </th>
  </tr>
</table>

Full Width On Mobile

Need a button to go full width on mobile? Simply add the full-width-sm class on the button <table>, and the col class on the anchor tag. Check the Outlined Button example ↑

Other Notes

We're using mso-padding-alt on the table cell - this keeps the button looking the same in Outlook.

You might have noticed that it's not using the same pixel values as the padding on the anchor. If it were, Outlook would add too much space above the anchor text. So, with shorthand CSS, we just use half the original top padding value: in our example, 12px becomes 6px top padding for Outlook-only.

Another thing is that <th> is used instead of <td>. This is for the sole purpose of writing less markup for bold text. If you don't need bold text, no need to add inline font-weight CSS: simply use <td> instead.

← Alert

Coupon →

Acorn Email Framework Documentation