Buttons

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

Standard button
Primary button
Centered button
Loading button
Destructive button
Pseudo button in larger clickable section
Small button
Stacked buttons
Full width button
Shaky 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
Buttons should be implemented with <a> or <button> html tags
<a> tags should be used when navigating between pages, whether external or internal
<button> tags should be used for actions that don’t affect the page itself
If a button is used within a larger clickable section then the button can be added with a span to avoid nesting clickable elements

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.

Designed for inclusion

All of our buttons are set at 48px high; a nice big tap target
Buttons should have at least 8px gap between them
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:
- aria-labelledby should be used for buttons with text, which needs more description for visually impaired users
- aria-label should be used for buttons with no text

Standard button

Implemented with `<button>`

View demo

320 x 568

View code

    <button class="gg-c-btn">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
</button>

Implemented with `<a>`

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

View demo

320 x 568

View code

    <a href="#" class="gg-c-btn" role="button">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-labelledby="button-label">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

320 x 568

View code

    <button class="gg-c-btn gg-c-btn--primary">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
</button>

Centered button

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

View demo

320 x 568

View code

    <button class="gg-c-btn gg-c-btn--primary gg-c-btn--center">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
</button>

Loading button

Use the gg-c-btn--loading modifier to show the loading icon. Please also include a second span, to display to screenreader users, with gg-c-btn--loading-text.

View demo

320 x 568

View code

    <button class="gg-c-btn gg-c-btn--loading">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
  <span class="gg-c-btn--loading-text">Loading...</span>
</button>

Destructive button

Use these buttons to warn members of a potentially irreversible change. Ensure that these have a meaningful name, don’t rely on colour to convey meaning.

View demo

320 x 568

View code

    <button class="gg-c-btn gg-c-btn--destructive">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
</button>

Pseudo button in larger clickable section

View demo

320 x 568

View code

    <a class="gg-t-wild-sand" href="#" style="padding: 72px; display: block;">
  <span class="gg-c-btn gg-c-btn--center">
    <span class="gg-c-btn__switch" aria-labelledby="button-label">Button</span>
  </span>
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
</a>

Small button

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

View demo

320 x 568

View code

    <button class="gg-c-btn--small-container">
  <span class="gg-c-btn gg-c-btn--small" aria-hidden="true">
    <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
    <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">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

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">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Longer text button</span>
</button>

<button class="gg-c-btn">
  <span id="button-label2" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label2">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

320 x 568

View code

    <button class="gg-c-btn gg-c-btn--full-width">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
</button>

Shaky button

These buttons have a shake effect using the class gg-c-btn--shake. They only shake once on class addition, and should be used to draw the users attention to the button.

View demo

320 x 568

View code

    <button class="gg-c-btn gg-c-btn--shake">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
</button>

This is an example of the gg-c-btn--shake class being assigned to a button on click. The original button will need to have class js-c-btn--shake-click on it, with the script added to your site to allow this functionality. It shakes on click and focus, for users with accessibility requirements.

View demo

320 x 568

View code

    <button class="gg-c-btn js-c-btn--shake-click">
  <span id="button-label" class="gg-u-screen-reader-only">Extra description for button</span>
  <span class="gg-c-btn__switch" aria-hidden="true" aria-labelledby="button-label">Button</span>
</button>

<script>
    (() => {
    const btn = document.querySelector('.js-c-btn--shake-click')

    function addShakeClass() {
      if (btn.classList.contains("gg-c-btn--shake")) {
        btn.classList.remove('gg-c-btn--shake');
      }
      btn.classList.add('gg-c-btn--shake');
      setTimeout(function(){
        btn.classList.remove('gg-c-btn--shake');
      }, 600);
    }

    btn.onclick = ()=> {
      addShakeClass();
    }

    btn.onfocus = ()=> {
      addShakeClass();
    }
  })();
</script>

Buttons

How we use them

Why we use them this way

Button animations:

Designed for inclusion

Implemented with <button>

Implemented with <a>

Implemented with `<button>`

Implemented with `<a>`