Buttons

Overview

Buttons are a highly visual way to encourage a user to complete an action. The templates provide buttons pre-styled in several different colours and formats so that there is always a standard button you can use for your site.

To use buttons well, you must consider that people associate specific colours with specific actions. For example, while the default button colour is light blue (to differentiate it from the branding colours on the page and make it stand out), if you are asking a user to complete something where they should be especially cautious -- like deleting an account -- using a red button might be more appropriate. Similarly, the soft button is designed for situations where you might need a less obtrusive button. Green is often used to submit a form.

When you should use buttons

Buttons are especially useful where:

• Pressing a button is required to complete a process. E.g. Submit a form or proceed to the next step
• You have one highly significant item you want to encourage users to click on a page (not multiple).

Recommended button use by colour

Light blue - highlight

• A simple call to action on a page where there is only one call to action (if there are multiple, a list pattern should be used).

Green - call to action

• Complete a form or process

Red - warning

• Delete, remove, cancel -- situations where you want the user to consider before they press a button

Light Gray - Soft

• Non-obtrusive interaction - eg. load more content to the page, pagination.

Hero - transparent and inverse

• Designed for use on-top of images or dark background where the standard buttons may not be suitable for contrast reasons.

When you should avoid buttons

Buttons should not be used:

• To replace simple text links in a paragraph, or where there are many calls to action on a page...they only work when used sparingly.
• Where there are several items close together that need to be clicked on - eg. a list of forms. In this situation, a listing component should be used.

As a wide range of buttons is already provided, glossy, "Web 2.0" type buttons, or buttons made out of images should not be used.

References

Patternry - button explanation

Default buttons

<a class="button">Call to action</a>
<a class="button brand">Brand</a>
<a class="button cta">Complete</a>
<a class="button warning">Warning</a>
<a class="button soft">Soft</a>

<a class="button-small">Call to action</a>
<a class="button-small brand">Brand</a>
<a class="button-small cta">Complete</a>
<a class="button-small warning">Warning</a>
<a class="button-small soft">Soft</a>

<a class="button-small with-arrow">Call to action</a>
<a class="button-small with-arrow brand">Brand</a>
<a class="button-small with-arrow cta">Complete</a>
<a class="button-small with-arrow warning">Warning</a>
<a class="button-small with-arrow soft">Soft</a>

Disabled buttons

<p>To disable a button implemented with an anchor element, use class <code>disabled</code> and attributes <code>aria-disabled="true"</code> and <code>tabindex="-1"</code>. To disable a button implemented with a <code>button</code> or <code>input</code> element, simply use the <code>disabled</code> attribute.
</p>
<p>
  <a aria-disabled="" class="button-small with-arrow disabled" href="#default-buttons" tabindex="-1">Disabled anchor button</a>
</p>
<p>
  <button class="button-small with-arrow" disabled="" type="button">Normal disabled button</button>
</p>
      

Hero

<div style="background: url(/assets/example/repeating-lt.png) center repeat; text-align: center; padding: 30px;">
  <a class="button-hero" href="#">Hero Button</a>
</div>
<div style="background: url(/assets/example/repeating-dk.png) center repeat; text-align: center; padding: 30px;">
  <a class="button-hero-inverse" href="#">Inverse Button</a>
</div>
      

Back button

<p>Use a small, <code>soft</code> button with the <code>with-arrow-left</code> class.
</p>
<p>
  <a class="button-small with-arrow-left soft" href="">Back to homepage</a>
</p>