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 ↗
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.
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.
Simply increase the
border-radius on a Filled Button, to get a Pill Button.
Remove the background colour and add a border on a Pill Button
<th>, to get an Outlined Pill Button.
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.
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:
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 ↑
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