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.

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>

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>

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>

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>

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>

Destructive button

Use these buttons to warn members of a potentially irreversible change.

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

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>

Small button

View demo Open in new window
320 x 568
View code
<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.

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>

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 Open in new window
320 x 568
View code
<button class="gg-c-btn gg-c-btn--full-width">
  <span class="gg-c-btn__switch">Button</span>
</button>