Buttons

Button

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

Small
Medium
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

Small
Medium
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

Small
Medium
Large, mobile centered
 
Theme Mountain

Current Version