People need things to click on

Pine uses a padding+border approach for buttons, which makes them easy to customise and maintain, while still looking great across email clients. If you need buttons that render pixel-perfect in Outlook (but are a bit more restrictive and harder to maintain), we highly recommend buttons.cm ↗

Filled Button #

Comes with a background colour and a 3px border-radius defined on the main table, for rounded corners in clients that support it. The 0-width border defined on the anchor tag is required in order to limit padding collapsing in Outlook.

Outlined Button #

Outlined buttons don't have a background colour set, and the border is changed from 0 to 2px:

Pill Button #

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

Tip: remove the background colour and increase the border thickness on a Pill Button, 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. 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 ↑

Next Up: Coupons →

Current Version