Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Buttons

There are several types of buttons on FutureLearn, each of which is suited for specific purposes and contexts. The button styles below are listed in the order of prominence they’d normally have in the interface, starting from the most prominent ones (or the most “loud” ones if we were to put it on a "visual loudness scale").

Push buttons

Push buttons are pink rectangular buttons, which are normally used to represent a primary call to action on a page or a module. Push buttons come in three sizes: Minion, Regular, and Boss. Below are the font sizes for the buttons:

  • Minions use fixed ‘Nano’ font size (12.64)
  • %a.a-button.a-button--minion{href: "#"} Click me
  • Regular buttons are the default and use responsive ‘Nano’ font size, with ‘Micro’ for small (14.22 - 14.22 - 16)
  • %a.a-button{href: "#"} Click me
  • Bosses use responsive ‘Milli’ font size (16 - 18 - 20.25)
  • %a.a-button.a-button--boss{href: "#"} Click me
    

Which size to use?

There can be multiple minions per page (though only one per module). However, generally we would only only have one Boss button on a page unless it is the same button. The reason for this is our Boss is the strongest most prominent call to action, and having multiple instances of it would result in a confusing hierarchy.

An easy way to remember this is to use this guide: there can be many minions, but only one Boss.

‘Elastic’ modifier

Apply this modifier to stretch a button across the containing element on small screens.

%a.a-button.a-button--elastic{href: "#"} Click me

Ghost buttons

Ghost buttons are rectangular buttons with a transparent background and a thin outline. They have the same size as the regular push buttons, but their function within a module is typically secondary.

Ghost buttons use a pink or white style, depending on whether they appear on a white or image/colour background.

.ghost-button-container
  %a.a-button.a-button--ghost{ href: "#ghost" }
    View all courses
.ghost-button-container
  %a.a-button.a-button--ghost.a-button--ghost--inverse{ href: "#ghost" }
    View all categories

Action link buttons

Contextual link buttons

Content links are linkable elements of content—text or images. They don’t have their own default style and instead inherit the typographic or image style of an element they belong to. However, all content text links should have the standard blue hover effect, to make it easier to recognise them as links.

.header.header-medium
  %h2.headline.headline-primary
    %a{href: '#'}
      Psychology and Mental Health
  %h2.headline.headline-secondary
    %a{href: '#'}
      University of Liverpool

How to use contextual link buttons

Use contextual links only for linking to additional information that is not essential for a learner’s prime task or action. If the desired action is crucial for the task, a push button should also be provided.

Course block on Courses page example

For example, a ‘More info’ push button is provided in addition to the contextual course title link and thumbnail on course index.

Icon buttons

It is sometimes appropriate to use icons as link elements—with or without the labels. If used without a label, the icon must be self explanatory. All icon buttons without labels must be accompanied by a tooltip and accessible to screen readers.

%a.a-text-with-icon{'data-icon' => icon(:like_empty)}
  like
%a.a-text-with-icon{'data-icon' => icon(:cmt_open)}
  reply

How to use icon buttons

Icons are usually more compact and minimal than buttons and text labels. Using icons as buttons can help to avoid clutter in the interfaces, however, not at the expense of clarity.