Overview
Buttons trigger an action when clicked.
They make the desired user action clear, signpost where the action is on a page and provide a more exciting user experience than a simple link - all of which increase the likelihood of the action being taken.
Design
Over a light background
Light backgrounds are best used to display longer copy, usually within the bulk of an email rather than in a header.
Default buttons
Default buttons are best used within a regular flow, such as stating "Find out more".
Primary button
Secondary button
Hover state
Clicked state
Alternate buttons
It's best to use alternate buttons within a purchase or conversion flow.
Primary alt button
Secondary alt button
Hover state
Clicked state
Over a dark background
Dark backgrounds are best used when displaying an image or illustration, usually within an email header.
Default buttons
Default buttons are best used within a regular flow, such as stating "Find out more".
Primary button
Secondary button
Hover state
Clicked state
Alternate buttons
It's best to use alternate buttons within a purchase or conversion flow.
Primary alt button
Secondary alt button
Hover state
Clicked state
View the Figma files
You can view these files in Figma here.
