Simple and reliable component for your email call to action
Buttons in Pine are simple, yet reliable. No need for 'hacks' like VML, they fallback gracefully.
The framework comes with 3 styles:
Buttons can be centered for mobile by applying the mobile-center class on their table.
To center a button on desktop, simply wrap it inside a <center></center> tag.
Note: the border, including the 0-width one, is required in order to prevent the button from collapsing too much in Outlook.
This is the basic button with a background colour.
It has a 3px border-radius defined on the main table, for rounded corners in clients that support it.
Outlined buttons don't have a background colour set, and the border is set from 0 to 1px.
The Pill Button is identical to the Filled Button, just that it has a bigger border-radius, to make it look like a ... well, pill.
Tip: you can simply remove the background colour on a Pill Button, to get an Outlined Pill Button.