- All buttons use Aperçu-Bold in title case.
- Primary and secondary buttons have a left & right padding of 50px.
- Tertiary buttons have no left or right padding and text is left aligned.
- Primary and secondary buttons have a border-radius of 5px.
- All buttons are the same height and can be paired together for multiple CTAs — a 30px margin should separate buttons paired together.
- There is a subtle fade transition from normal to hover state on buttons.
transition: all 0.2s;
Ideally, most buttons should be used in isolation, paired with copy, so there is a clear function of the button, to action something or navigate somewhere.
When there are multiple calls to action or options — consider the hierarchy ↗ of your CTAs and positive vs neutral actions ↗ when deciding which button styles to use, and the wording and intent of your buttons.
Button Pairing Best Practices
Below are some suggestions for when more than one call-to-action is necessary.