Web Style Guide

Buttons

A basic button can be created with minimal markup. Use the a tag if the button is a link to another page, or a link to an anchor within a page. Use the button tag (not class) for form elements.

Web Team Notes 2018.10.09

May update style so button group outer buttons have rounded corners and inner buttons do not. Also planning to add a clear button and may disable hover effect on disabled button types.

Button Colours and Styles

Standard Button

.button .blue
Button with coloured fill background and white text capitalized.

HTML

Hollow Button

.button .blue .hollow
Button with matching coloured text and border with transparent fill.

HTML

Disabled Button

.button .blue .disabled

25% opacity of a standard button with restricted cursor symbol.

HTML

Transparent Button

.button .blue .transparent

Similar to hollow button but without a border outline and padding inherited.

HTML

Button Sizes

Tiny Button
Small Button
Standard Button
Large Button
Expanded Button
Small Expanded Button

Button Group

Add the .button-group class to a container, and inside it place any number of buttons. The buttons are separated by a small border.

Small Button Group

Even-width Group

Add the .expanded class to the container to make a full-width button group. Each item will automatically size itself based on how many buttons there are, up to a maximum of six.

Expanded Button Group

Stacked Button Group

A button group can be made vertical with the .stacked class. You can also use .stacked-for-small to only stack a button group on small screens, or .stacked-for-medium to only stack on small and medium screens.

How Low Can You Go