Buttons

Details

There are three button colors for gereral use on the site. They each have their own set of rules:

  1. Primary Buttons (orange): Primary buttons are used to provide focal points on a page and call users to action. There should only ever be one primary button on a page.
  2. Secondary Buttons (dark grey): Secondary buttons are used to denote places of action that may not be the primary or the focal point of the page. There should only ever be one secondary button on a page.
  3. Tertiary Buttons (light grey): Tertiary buttons are used to denote places of action that may not be the primary, secondary, or focal point of the page. Tertiary buttons are often used when there are several or many actions a user could complete, none of which are primary.

Code

You can make a button out of several different html controls. Here are the examples.

<button class="button button-tertiary">Tertiary Button <span></span></button>
<a href="#" class="button button-tertiary">Tertiary Button <span></span></a>
<input class="button button-tertiary" value="Tertiary Button" />

Configurables

  • Primary Button: use the class "button-primary"
  • Secondary Button: use the class "button-secondary"
  • Tertiary Button: use the class "button-tertiary"
  • Add a double arrow: Add an empty <span> before the ending tag. (Note: This is impossible with the <input> version.)