Buttons

Default Buttons

Button

Button

Button

While all these work, best practice is to only style a button as a button. Further, only use a button to invoke an action on the page, rather than linking to another page. Use an anchor (<a>) tag for that.

Button with icon

Add Criterion

Button Colors

Grey Button

Blue Button
For "positive use". Eg. Submit, Save, OK, Apply.

Red Button
For "negative actions". Eg. Delete.
Only display in a modal/popup.

DO NOT use blue and red buttons together!

Blue Button Red Button
Do not do this.

Button Sizes

Small Button

Default Button

Large Button

Wide Button

Use <button class="blue large"> (yes, you can combine these classes to your heart's content) for the single, significant actionable "call-to-action" button. Eg. Plan Search, Create Campaign.

Button Groups

Button Group showing an active state

Button Group with links instead of buttons.

Button Group with icons.