Links and buttons

A link should be descriptive of the place it's taking the user. A button should tell the user what it is going to do with the information they have provided.

This page is a more detailed description of how to use the links and buttons in the pattern library.

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’.