People need things to click on

Buttons in Pine 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; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
      <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</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; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
      <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</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; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
      <a href="http://thememountain.com" style="color: #34BF49; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</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; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
      <a href="http://thememountain.com" style="color: #34BF49; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</a>
    </th>
  </tr>
</table>

Pill

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

Preview
Code

<table cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <th bgcolor="#34BF49" style="border-radius: 50px; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
      <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</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

<!-- Align: Right for Desktops and Tablets, Center for Mobile -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td class="col" width="640" style="padding: 0 10px;">
      <table align="left" class="align-sm-center" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
          <th bgcolor="#34BF49" style="border-radius: 3px; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
            <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</a>
          </th>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!-- Align: Right for Desktops and Tablets, Left for Mobile -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td class="col" width="640" style="padding: 0 10px;">
      <table align="right" class="align-sm-left" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
          <th bgcolor="#34BF49" style="border-radius: 3px; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
            <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</a>
          </th>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!-- Align: Center for Desktops and Tablets, Right for Mobile -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td class="col" width="640" style="padding: 0 10px;">
      <table align="center" class="align-sm-right cellpadding=" cellspacing="0" role="presentation" style="margin: 0 auto;">
        <tr>
          <th bgcolor="#34BF49" style="border-radius: 3px; line-height: 100%; mso-padding-alt: 5px 50px 10px;">
            <a href="http://thememountain.com" style="color: #FFFFFF; display: block; font-size: 13px; padding: 10px 50px; text-decoration: none;">Button text</a>
          </th>
        </tr>
      </table>
    </td>
  </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, simply use <td> instead - no need to add inline font-weight CSS.

← Alert

Coupon →

Pine Email Framework Documentation