Buttons indicate that an action can be performed.
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 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.
Apply this modifier to stretch a button across the containing element on small screens.
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 on background
Modifier class: `a-button--on-background`
To be used when the button is used on an image background where a ghost button with transparent background in not legible.
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.
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.
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.
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.
This is a link/button style for moving back in site navigation.
There is a basic version that can be seen in Group Showcase and a more stylistic version on Welcome Discussion () steps.
`a-back-link` is the base class and `a-back-link--header` and `a-back-link--inverse` are the available modifiers.