Buttons

These cute clickable dials are how we let members know what action they should take


How we use them

  • Keep button copy short
  • Use the primary button style to show the most important action
  • The primary button style should only be used once per major section of a page
  • “Boing” marks only appear on devices that support hover effects
  • The size of the copy lets you know how big the button should be. If we have full-width buttons on some components and not others the website starts to look a bit messy

Note: The “boing” marks are shown by using the @media (hover) css rule. Internet Explorer won’t show the “boing” marks as they don’t support this rule.

Why we use them this way

Button animations:

It’s fairly obvious that CTA design influences the number clicks a button receives. As a result, we decided to go a little farther with our button designs and add some small animations, assuming, possibly arrogantly, that these animations also have an effect on overall clicks.

Page tested: giffgaff.com/about-us

Results: We saw a pretty conclusive 1,200 more clicks on the doodle CTAs (1,950 vs. 3,150 clicks) than on the non-doodle buttons. This brought in an extra 100 orders and an additional 40 activations from the /about-us page. This amounts to an increase of 5% and 28% respectively. For context, this page brings in around 2,000 orders and 140 activations a month. We’d call that a result.

How they look

Generally, buttons should be implemented with <a> or <button> html tags. If a button is used within a larger clickable section then the button can be added with a span to avoid nesting clickable elements.

Designed for inclusion

  • All of our buttons are set at 48px high; a nice big tap target
  • We keep button copy clear and concise, for optimum usability
  • We ensure that our buttons have the appropriate aria labelling to give all users clarity

Standard button

Implemented with <button>

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn" aria-label="Button">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>

Implemented with <a>

When using an a tag, remember to add the role="button" attribute.

View demo Open in new window
320 x 568
View code
<a href="#" class="gg-c-btn" role="button">
  <span class="gg-c-btn__switch">Button</span>
</a>

Primary button

Primary buttons should convey the main action. Try to only use these once per page.

To use, add the gg-c-btn--primary modifier class to your button.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn gg-c-btn--primary" aria-label="Button">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>

Centered button

Use the gg-c-btn--center modifier.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn gg-c-btn--primary gg-c-btn--center" aria-label="Button">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>

Loading button

Use the gg-c-btn--loading modifier to show the loading icon.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn gg-c-btn--loading" aria-label="Button">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>

Disabled button

<button class="gg-c-btn"> can be disabled by using the disabled attribute or by using the gg-c-btn--disabled modifier.

<a class="gg-c-btn"> can only be disabled by using the gg-c-btn--disabled modifier.

Please ensure that you also use the aria-disabled="true" label on your buttons, so that screen reader users are aware that there is a disabled button on the UI. Using the disabled attribute on its own will cause some screen readers to completely ignore our buttons.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn" disabled aria-disabled="true" aria-label="Button">
  <span class="gg-c-btn__switch"  aria-hidden="true">Button</span>
</button>
<br>
<br>
<button class="gg-c-btn gg-c-btn--disabled" aria-label="button" aria-disabled="true">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>
<br>
<br>
<a class="gg-c-btn gg-c-btn--disabled" aria-disabled="true" role="button">
  <span class="gg-c-btn__switch">Button</span>
</a>

Note: Disabled styling will overrule loading styles.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn gg-c-btn--loading" disabled aria-disabled="true" aria-label="Button">
  <span class="gg-c-btn__switch"  aria-hidden="true">Button</span>
</button>

Destructive button

Use these buttons to warn members of a potentially irreversible change.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn gg-c-btn--destructive" aria-label="Button">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>

Pseudo button in larger clickable section

View demo Open in new window
320 x 568
View code
<a class="gg-t-light-blue" href="#" style="padding: 72px; display: block;">
  <span class="gg-c-btn gg-c-btn--center">
    <span class="gg-c-btn__switch">Button</span>
  </span>
</a>

Small button

Our small buttons take up the same tap-target size as our normal buttons.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn--small-container" aria-label="Button">
  <span class="gg-c-btn gg-c-btn--small" aria-hidden="true">
    <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
  </span>
</button>

Stacked buttons

If you have multiple buttons stacked on top of one another, consider making them the same width using the gg-u-max-content-stack class on the container.

View demo Open in new window
320 x 568
View code
<div class="gg-u-max-content-stack gg-c-btn--center">

<button class="gg-c-btn gg-c-btn--primary" aria-label="button">
  <span class="gg-c-btn__switch" aria-hidden="true">Longer text button</span>
</button>

<button class="gg-c-btn" aria-label="button">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>
</div>

Full-width button

These buttons will sit across the screen until they get to 400px, at which point they will behave just like our usual buttons.

View demo Open in new window
320 x 568
View code
<button class="gg-c-btn gg-c-btn--full-width" aria-label="button">
  <span class="gg-c-btn__switch" aria-hidden="true">Button</span>
</button>