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