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; i.e. submitting a form, opening a modal
• 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
• Ideally, we should make sure that buttons contain all the context required. However, if extra clarity is required for assistive tech users, we ensure that our buttons have the appropriate aria labelling:
  • aria-labelledby should be used for buttons with text, if more text is required (see first example)
  • aria-label, and name, should both be used for buttons with no text (see loading button example)

Standard button

Implemented with <button>

Note the extra, optional, description that can be added (only if required) for assistive tech.

    
<button class="gg-c-btn">
  <span class="gg-c-btn__switch">Button</span>
</button>

  

<button> with extra content for assitive tech

Our buttons should provide context for all our users, but if you find yourself in a situation where a non-visual experience wouldn’t be as clear, you can add that content in with the use of an extra span.

• add an extra span for your extra content inside the button with a class of gg-u-screen-reader-only, and an ID of your choice
• IF your original button text is no longer needed for the non-visual experience, add aria-hidden="true" to your button text span
• Link up the extra content with the button by using aria-labelledby

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

  

Implemented with <a>

    
<a href="#" class="gg-c-btn">
  <span class="gg-c-btn__switch">Descriptive link text</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">
  <span class="gg-c-btn__switch">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">
  <span class="gg-c-btn__switch">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 and users who have turned motion off, with gg-c-btn--loading-text. No need to add any IDs or styling, the functionality you see below is built in.

Make sure you also add an accessible name to the button that concisely describes the button’s function.

    
<button name="loading" class="gg-c-btn gg-c-btn--loading">
  <span class="gg-c-btn__switch">Button</span>
  <span class="gg-c-btn--loading-text">Loading...</span>
</button>

<p class="gg-u-pt-small">If you had motion turned off, here's what you'd experience:</p>

<style>
  #pretend-motion-is-off.gg-c-btn--loading:after {
      display: none;
    }

  #pretend-motion-is-off .gg-c-btn--loading-text {
    position: relative;
    width: unset;
    margin: unset;
    overflow: unset;
  }
</style>

<button name="loading" class="gg-c-btn gg-c-btn--loading" id="pretend-motion-is-off">
  <span class="gg-c-btn__switch">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.

    
<button class="gg-c-btn gg-c-btn--destructive">
  <span class="gg-c-btn__switch">Button</span>
</button>

  

Pseudo button in larger clickable section

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

  

Small button

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

    
<button class="gg-c-btn--small-container">
  <span class="gg-c-btn gg-c-btn--small">
    <span class="gg-c-btn__switch">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">
  <span class="gg-c-btn__switch">Longer text button</span>
</button>

<button class="gg-c-btn">
  <span class="gg-c-btn__switch">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">
  <span class="gg-c-btn__switch">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.

    
<button class="gg-c-btn gg-c-btn--shake">
  <span class="gg-c-btn__switch">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.

    
<button class="gg-c-btn js-c-btn--shake-click">
  <span class="gg-c-btn__switch">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>