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 ↗
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 buttons don't have a background colour set, and the border is changed from 0 to 2px:
Simply increase the border-radius on a Filled Button, to get a 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. 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:
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 ↑