Button

Purpose

Buttons indicate that an action can be performed.

Description

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

Variants

Push button

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)
  • Regular buttons are the default and use responsive ‘Nano’ font size, with ‘Micro’ for small (14.22 - 14.22 - 16)
  • Bosses use responsive ‘Milli’ font size (16 - 18 - 20.25)

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.

Button Push

Ghost button

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.

Button Ghost

Link buttons

In order to ensure button and link font size consistency, link buttons use button sizing mixin. Therefore by default they use responsive ‘Nano’ font size, with ‘Micro’ for small screens (14.22 - 14.22 - 16). Link button has a label that suggests a secondary action or additional information.

Button Link

Underlined link button

There are instances where we use links on a coloured background, and so cannot use our standard pink style. In this instance, we use white link text, with an underlined hover state.

Underlined Link

Contextual link button

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.

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.

Button Link Contextual

Icon button

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.

Button Icon

Added by: