Button

Form Buttons and Link Buttons

We use 4 different kinds of buttons

  • Action button: "orange button"  (.button-action, .button) is designated as the Call to Action and for use as form buttons.
  • Primary button: "blue button" (.button-primary or .button-blue) is used for important information or secondary call to action.
  • General button, "gray button" (.button-general, .button-gray) is tertiary level of info buttons.
  • Understated button: "outline button" (.button-understated,.button-white) is a simple white button used for adjunct information.
<a class="button-action" href="#">Action Button</a>
<a class="button-primary" href="#">Primary Button</a>
<a class="button-general" href="#">General Button</a>
<a class="button-understated" href="#">Understated Button</a>


<form action="#">
<input type="submit" class="button-action" value="Action Button">
<input type="submit" class="button-primary" value="Primary Button">
<input type="submit" class="button-general" value="General Button">
<input type="submit" class="button-understated" value="Understated Button">
</form>
Link Buttons:

Action Button

Primary Button

General Button

Understated Button

Form Buttons:

 

Mini Buttons (as of v1.0.16)

To make the buttons smaller, we can just add the class "mini", like so

Action Button

Primary Button

General Button

Understated Button

<a class="button-action mini" href="#">Action Button</a>
<a class="button-primary mini" href="#">Primary Button</a>
<a class="button-general mini" href="#">General Button</a>
<a class="button-understated mini" href="#">Understated Button</a>

Mega Buttons (as of v1.0.16)

Action Button

Primary Button

General Button

Understated Button

<a class="button-action mega" href="#">Action Button</a>
<a class="button-primary mega" href="#">Primary Button</a>
<a class="button-general mega" href="#">General Button</a>
<a class="button-understated mega" href="#">Understated Button</a>