Buttons

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

• Standard button
• Primary button
• Centered button
• Loading button
• Disabled button
• Destructive button
• Pseudo button in larger clickable section
• Small button
• Stacked buttons
• Full width button

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>

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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

<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.

<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.

<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.

<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>