Links and buttons

Buttons

Buttons must use:

  • Avenir Next Medium at 20px (1em)
  • a 3px border radius
  • 15px 37.5px padding (as calculated by the browser because we size with em)
  • a box-shadow
  • a lightened background colour on hover (see the colour page)
  • a 4px blue outline on focus and active

Button width should be defined by the content on the button. Buttons should also be ranged left with the left edge aligning with other content.

Example

Use the green primary button when you have one call to action on your page.

Example Form

Links that are styled as buttons should be an action, such as, ‘Continue’, ‘Book’ or ‘Confirm’.

Feedback

Did you find this useful?