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.

1. Standard button

Implemented with <button>

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

Implemented with <a>

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

2. Primary button

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

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

3: 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">
  <span class="gg-c-btn__switch">Button</span>
</button>

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

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

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

Disabled style 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>
  <span class="gg-c-btn__switch">Button</span>
</button>

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

7. Small button

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

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

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