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>

Mini Buttons (as of v1.0.16)

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

<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)

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