Code Club Style Guide

Buttons

How to Use Buttons

Button styles can be applied to standard links or the button element.

Example
<button class="c-button">Button</button>
<a class="c-button" href="#">Button as Link</a>

You should not use the <input type="button"> element. If you need a button in a form, use the button element as shown.

Some notes on button usage

Always try to make your button label as descriptive as possible, while also keeping it as short as possible. For example, if you had a button in a form that sent a message to a Code Club host, the text "Contact Host" is much better than "Submit". The user has a much clearer understanding of what will happen when they click the button.

There are several available styles for colouring buttons. They are available to allow you to style buttons in any way you might imagine, but remember to follow these two golden rules:

See below for the full list of colour options.


Colouring Buttons

Buttons can be styled with any colour in the palette. Be careful to have appropriate contrast between the color of the button and its background.

Example

<p><button class="c-button c-button--grey-dark">grey-dark - #333333</button></p>
<p><button class="c-button c-button--grey-med">grey-med - #848484</button></p>
<p><button class="c-button c-button--grey-light">grey-light - #C2C2C2</button></p>
<p><button class="c-button c-button--grey-x-light">grey-x-light - #E0E0E0</button></p>
<p><button class="c-button c-button--grey-xx-light">grey-xx-light - #F5F6F9</button></p>
<p><button class="c-button c-button--green">green - #339933</button></p>
<p><button class="c-button c-button--blue">blue - #5290D2</button></p>
<p><button class="c-button c-button--yellow">yellow - #FFF578</button></p>
<p><button class="c-button c-button--red">red - #FF5252</button></p>

Hollow Buttons

Example

<p><button class="c-button c-button--hollow c-button--grey-dark">grey-dark - #333333</button></p>
<p><button class="c-button c-button--hollow c-button--grey-med">grey-med - #848484</button></p>
<p><button class="c-button c-button--hollow c-button--grey-light">grey-light - #C2C2C2</button></p>
<p><button class="c-button c-button--hollow c-button--grey-x-light">grey-x-light - #E0E0E0</button></p>
<p><button class="c-button c-button--hollow c-button--grey-xx-light">grey-xx-light - #F5F6F9</button></p>
<p><button class="c-button c-button--hollow c-button--green">green - #339933</button></p>
<p><button class="c-button c-button--hollow c-button--blue">blue - #5290D2</button></p>
<p><button class="c-button c-button--hollow c-button--yellow">yellow - #FFF578</button></p>
<p><button class="c-button c-button--hollow c-button--red">red - #FF5252</button></p>

Sizing Buttons

Buttons come in four sizes. Small, normal, large and extra large. The

Example

<p><button class="c-button c-button--small c-button--green">Small Button</button></p>
<p><button class="c-button c-button--green">Normal Button</button></p>
<p><button class="c-button c-button--large c-button--green">Large Button</button></p>
<p><button class="c-button c-button--x-large c-button--green">Extra Large Button</button></p>

Miscellaneous Button Options

Buttons can contain icons, dim when disabled, can have a more squared border radius, and have a couple of sizing options too.

These styles can be mixed-and-matched in a variety of configurations.

Example

Disabled button

A squared button

A button that fills the width of its parent

<p>
<button class="c-button c-button--hollow c-button--green">
<span class="c-icon c-icon--small c-icon--star c-icon--green"></span>
Button with an icon
</button>
</p>
<p>
<button class="c-button c-button--link" href="#">
This button looks like a link
</button>
</p>
<p><a class="c-button c-button--green c-button--disabled" href="#">Disabled button</a></p>
<p><a class="c-button c-button--blue c-button--squared" href="#">A squared button</a></p>
<p><a class="c-button c-button--block" href="#">A button that fills the width of its parent</a></p>

Button Groups

Occasionally you may want to provide a toggle or option-based set of buttons. Use a c-button-group to achieve this.

Example
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--grey-dark c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--grey-dark" href="#">Button 2</a>
<a class="c-button c-button--grey-dark" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--grey-med c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--grey-med" href="#">Button 2</a>
<a class="c-button c-button--grey-med" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--grey-light c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--grey-light" href="#">Button 2</a>
<a class="c-button c-button--grey-light" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--grey-x-light c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--grey-x-light" href="#">Button 2</a>
<a class="c-button c-button--grey-x-light" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--grey-xx-light c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--grey-xx-light" href="#">Button 2</a>
<a class="c-button c-button--grey-xx-light" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--green c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--green" href="#">Button 2</a>
<a class="c-button c-button--green" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--blue c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--blue" href="#">Button 2</a>
<a class="c-button c-button--blue" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--yellow c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--yellow" href="#">Button 2</a>
<a class="c-button c-button--yellow" href="#">Button 3</a>
</div>
<div class="c-button-group c-button-group__center">
<a class="c-button c-button--red c-button__selected" href="#">Button 1</a>
<a class="c-button c-button--red" href="#">Button 2</a>
<a class="c-button c-button--red" href="#">Button 3</a>
</div>