Default Buttons


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

Button Colors

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

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

DO NOT use blue and red buttons together!

Do not do this.

Button Sizes

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.