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:

  • Filled
  • Outlined
  • Pill
Customization is simple:

  • Background colour: change the default #EEEEEE on the main table and in the link border
  • Size: change the padding on the link
  • Typography: change the font family, size, and weight on the link

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.

Filled Button

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.

Example: Filled Button

Filled button examples

Large, mobile centered

Outlined Button

Outlined buttons don't have a background colour set, and the border is set from 0 to 1px.

Example: Outlined Button

Outlined button examples

Large, mobile centered

Pill Button

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.

Example: Pill Button

Pill button examples

Large, mobile centered
Theme Mountain

Current Version