Navigation: Buttons

Create interactive, functional elements to guide the user and create a positive, consistent browsing experience.

Quick Summary

Creating Buttons: Use a link element, then style with CSS. Style using one of the following button variations.

Button Variations: Button variations are broken down into three categories: Outlined Positive, Outlined Negative, and Solid.

Outlined Positive: Outlined buttons that become solid on hover. View on Codepen.

Outlined Negative: Solid buttons that turn to outlines on hover. View on Codepen.

Solid: Solid-coloured buttons that change colour on hover. View on Codepen.

Creating Buttons

When implementing buttons, start with a link HTML element, then add style classes as defined in the examples listed below. See codepen links for more details.

Button Variations

Buttons: Outlined Positive

When implementing positive outlined buttons, there are two options to choose from: Charcoal and Deep Green. Other brand colours should not be used for positive outlined buttons due to contrast. View on Codepen

Buttons: Outlined Negative

When implementing negative outlined buttons, there are four options to choose from: Charcoal, Deep Green, Light Blue, and Ash Grey. These options should be chosen based on contrast with their parent element. View on Codepen

Buttons: Solid

When implementing solid buttons, there are four options to choose from:Charcoal, Deep Green, Light Blue, and Ash Grey. These options should be chosen based on contrast with their parent element. View on Codepen