Buttons are used to initiate an action or for navigation.
- Keep labels simple and short – no more than two or three words long and clearly describing the action or destination.
- Additional invisible text can be included to ensure the accessibility of the link.
- All buttons other than the transparent button are built to work on light and dark accent colours.
- All buttons have a minimum height of 55px and a minimum width of 100px to ensure a sensible clickable / tappable size.
- Primary buttons should be the most visually prominent element on the page.
- Transparent buttons are for use over areas of strong colour, eg. promotional modals.
- Icon buttons can be used to highlight certain actions such as download etc.
- Print buttons should only be used when linking to a page that is specifically designed for printing, or if being added via JavaScript to print the current page.
- Full width buttons should be used where a button must display the full width of its container.
- Next and back buttons should be centralised where space allows.
- Buttons display at full width in mobile views.
- See style guide for colour and typography rules.
- Icons should not be used on transparent buttons on accent colours.
- Avoid using multiple instances of primary buttons on the same page; instead use secondary button styles, links, chevrons or imagery to differentiate calls to action.
- Anchors must not open in a new window, eg.
target="_blank"
, unless it would disrupt a users journey such as when within a large form. Read more about opening links in new windows.
Examples
Primary
The primary button should be the most visually prominent element on the page. If possible, avoid using multiple instances of primary buttons on the same page; instead use secondary button styles, links, chevrons or imagery to differentiate calls to action.
Secondary
Secondary buttons with icons
These icons must only be used with secondary or tertiary buttons. They must NOT be used with primary or transparent buttons on accent colours.
Tertiary
Tertiary buttons are designed to look like a standard text link but provide a larger than standard hit target.
Transparent
For use over area of strong colour, eg. promotional modal.
Form
ONLY to be used when placing a primary or secondary button next to a form element. The reduced height of these buttons means they align with form elements perfectly unlike other button variants.
Only to be used when linking to a page that is specifically designed for printing, or if being added via javascript to print the current page. Icon buttons should NOT be used on transparent buttons on accent colours.
Watch video
Icon buttons should NOT be used on transparent buttons on accent colours.
Live-chat
Icon buttons should NOT be used on transparent buttons on accent colours.
Disabled
Full width button
Make a button display full width of its container.
Button group
Group of buttons on one line.
Button group of three (first button feature)
Group of buttons three on one line, with the first button being a featured primary button; at small screen sizes, the two secondary buttons stay side-by-side under the primary button.
Next and previous button group
Next and back buttons which are centralised on screen when on large enough screens.
Notes for developers
When a button needs to be more descriptive of what or where it is going, but there is a requirement to show simplified text, the additional text can be hidden visually, for example:
<a class="a-button" href="...">Find out more<span class="u-hidden--visually"> about car insurance</span></a>
Important:As additional markup is required for styling inputs, please use standard buttons unless absolutely necessary.
Using a disabled button
Do not rely solely on styling for disabled buttons (<button>
, <input type="button" />
or <input type="submit" />
): explicitly provide the disabled="disabled"
attribute.
<input type="submit" value="..." disabled />
Read more about national conventions for writing telephone numbers.
Links to external websites
If a link is taking the user to an external website, ensure that it is clear that it will do so by making the title attribute descriptive of what it will do and where it will go, for example:
<a href="http://www.google.com" title="External site - www.google.com" rel="external">Google</a>
Anchors must not open in a new window, eg. target="_blank"
, unless it would disrupt a users journey such as when within a large form. Read more about opening links in new windows.
Notes for testers
- Ensure that buttons can be accessed via the mouse as well as via tabbing using the keyboard.
- Use a screen reader to confirm that the buttons are understandable as to where they will be going when listed out of context of the page.
- Ensure that when hovering over a button, the style changes noticeably.
- Ensure that when a button has focus, the style changes noticeably.
- Ensure that text within buttons is descriptive of what or where the button is going. Additional text descriptive text can be hidden visually from the user to aid to help make the button understandable, especially if there area number of links / buttons such as "Find out more" on the page which go to different locations.
- Ensure that all buttons are device agnostic and do not specify how a user should be interacting with a button, eg. click.
Code Examples
Primary
<button class="a-button a-button--primary">...</button>
<!-- or --->
<span class="a-button a-button--primary a-button--input"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--primary" href="...">...</a>
Secondary
<button class="a-button a-button--secondary">...</button>
<!-- or --->
<span class="a-button a-button--input a-button--secondary"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--secondary" href="...">...</a>
Secondary buttons with icons
Note: icon buttons will NOT work correctly with <input>
elements as they are not compatible with the CSS :after
pseudo element. Please use either the button or anchor element.
<button class="a-button a-button--[ Modifier ]">...</button>
<!-- or --->
<span class="a-button a-button--[ Modifier ] a-button--input"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--[ Modifier ]" href="...">...</a>
Tertiary
Tertiary buttons are designed to look like a standard text link but provide a larger than standard hit target.
<button class="a-button a-button--tertiary"><span class="a-button__inner">...</span></button>
<!-- or --->
<span class="a-button a-button--tertiary a-button--input"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--tertiary" href="..."><span class="a-button__inner">...</span></a>
Tertiary - with icons
<button class="a-button a-button--tertiary a-button__icon [ Modifier ]"><span class="a-button__inner">...</span></button>
<!-- or --->
<span class="a-button a-button--tertiary a-button--input a-button__icon [ Modifier ]"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--tertiary a-button__icon [ Modifier ]" href="..."><span class="a-button__inner">...</span></a>
Transparent
<button class="a-button a-button--transparent">...</button>
<!-- or --->
<span class="a-button a-button--transparent a-button--input"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--transparent" href="...">...</a>
Form
<button class="a-button [ Modifier ] a-button--form">...</button>
<!-- or --->
<span class="a-button [ Modifier ] a-button--form a-button--input"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button [ Modifier ] a-button--form href="...">...</a>
Watch video
Icon buttons should NOT be used on transparent buttons on accent colours.
Note: Call to action buttons will NOT work with <input>
elements as they are not compatible with the CSS :after
pseudo element. Please use either the button or anchor element.
<button class="a-button a-button--primary a-button--video">...</button>
<!-- or --->
<span class="a-button a-button--primary a-button--video a-button--input"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--primary a-button--video" href="...">...</a>
Live-chat
Icon buttons should NOT be used on transparent buttons on accent colours.
Note: Call to action buttons will NOT work with <input>
elements as they are not compatible with the CSS :after
pseudo element. Please use either the button or anchor element.
<button class="a-button a-button--livechat">...</button>
<!-- or --->
<span class="a-button a-button--livechat a-button--input"><input class="a-button__inner" type="button" value="..." /></span>
<!-- or --->
<a class="a-button a-button--livechat" href="...">...</a>
Disabled
Note: Form elements can be disabled by simply setting the disabled
attribute (although the class of is-disabled
will still work). Anchor buttons are unable to use this attribute, so can only make use of the class.
Caveat: Events are attempted to be suppressed by setting pointer-events: none
, however this is only supported in modern browsers, and as such it is recommended to use javascript to disable on legacy browsers.
<button class="a-button" disabled>...</button>
<!-- or --->
<span class="a-button a-button--input is-disabled"><input class="a-button__inner" type="button" value="..." disabled /></span>
<!-- or --->
<a class="a-button is-disabled" href="...">...</a>
Full width button
<a class="a-button a-button--full-width" href="...">...</a>
Button group
<ul class="m-button-group">
<li class="m-button-group__item">...</li>
<li class="m-button-group__item">...</li>
</ul>
Button group of three (first button feature)
<ul class="m-button-group m-button-group--feature-three">
<li class="m-button-group__item">...</li>
<li class="m-button-group__item">...</li>
</ul>
Next and previous button group
<ul class="m-button-group m-button-group--pagination">
<li class="m-button-group__item"><!-- Next button --></li>
<li class="m-button-group__item m-button-group__item--previous"><!-- Previous button --></li>
</ul>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.a-button |
Base button style (white), hover/focus blue | Yes | button , input , a |
|
.a-button--primary |
Primary button (yellow), hover/focus blue | .a-button |
||
.a-button--tertiary |
Tertiary button styling to resemble text link | .a-button |
||
.a-button--transparent |
Transparent button, hover/focus blue | .a-button |
||
.a-button--form |
Form button | .a-button |
To be used on primary and secondary buttons in conjunction with form elements. | |
.a-button--add |
Add button with icon | .a-button |
||
.a-button--attachment |
Attachment button with icon | .a-button |
||
.a-button--auto-renewal |
Auto-renewal button with icon | .a-button |
||
.a-button--back |
Reply/back button with icon | .a-button |
||
.a-button--bookmark |
Bookmark button with icon | .a-button |
||
.a-button--calculator |
Calculator button with icon | .a-button |
||
.a-button--call |
Call button with icon | .a-button |
||
.a-button--claim |
Claim button with icon | .a-button |
||
.a-button--delete |
Delete button with icon | .a-button |
||
.a-button--document |
Document button with icon | .a-button |
||
.a-button--download |
Download button with icon | .a-button |
||
.a-button--edit |
Edit button with icon | .a-button |
||
.a-button--external |
External link button with icon | .a-button |
||
.a-button--geo-location |
Geo-location button with icon | .a-button |
||
.a-button--information |
Information button with icon | .a-button |
||
.a-button--links |
Links button with icon | .a-button |
||
.a-button--livechat |
Live-chat button with icon | .a-button |
||
.a-button--location |
Location button with icon | .a-button |
||
.a-button--medical-professional |
Medical-professional button with icon | .a-button |
||
.a-button--message |
Message button with icon | .a-button |
||
.a-button--new-window |
New-window button with icon | .a-button |
||
.a-button--next |
Next button with icon | .a-button |
||
.a-button--opening-hours |
Opening-hours button with icon | .a-button |
||
.a-button--places |
Places button with icon | .a-button |
||
.a-button--previous |
Previous button with icon | .a-button |
||
.a-button--print |
Print button with icon | .a-button |
||
.a-button--profile |
Profile button with icon | .a-button |
||
.a-button--remove |
Remove button with icon | .a-button |
||
.a-button--rss |
RSS button with icon | .a-button |
||
.a-button--save |
Save button with icon | .a-button |
||
.a-button--search |
Search button with icon | .a-button |
||
.a-button--secure |
Secure button with icon | .a-button |
||
.a-button--share |
Share button with icon | .a-button |
||
.a-button--upload |
Upload button with icon | .a-button |
||
.a-button--top |
Top button with icon | .a-button |
||
.a-button__icon |
Tertiary button with icon base styling | .a-button--tertiary |
Used in conjunction with tertiary icon classes .a-button__icon--****** below when adding an icon |
|
.a-button__icon--add |
Tertiary button with add icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--attachment |
Tertiary button with attachment icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--auto-renewal |
Tertiary button with auto-renewal icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--back |
Tertiary button with reply/back icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--bookmark |
Tertiary button with bookmark icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--calculator |
Tertiary button with calculator icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--call |
Tertiary button with call icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--claim |
Tertiary button with claim icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--delete |
Tertiary button with delete icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--document |
Tertiary button with document icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--download |
Tertiary button with download icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--edit |
Tertiary button with edit icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--external |
Tertiary button with external link icon to the right | .a-button--tertiary .a-button__icon |
||
.a-button__icon--geo-location |
Tertiary button with geo-location icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--information |
Tertiary button with information icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--links |
Tertiary button with links icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--livechat |
Tertiary button with live-chat icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--location |
Tertiary button with location icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--medical-professional |
Tertiary button with medical-professional icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--message |
Tertiary button with message icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--new-window |
Tertiary button with new-window icon to the right | .a-button--tertiary .a-button__icon |
||
.a-button__icon--next |
Tertiary button with next icon to the right | .a-button--tertiary .a-button__icon |
||
.a-button__icon--opening-hours |
Tertiary button with opening-hours icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--places |
Tertiary button with places icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--previous |
Tertiary button with previous icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--print |
Tertiary button with print icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--profile |
Tertiary button with profile icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--remove |
Tertiary button with remove icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--rss |
Tertiary button with RSS icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--save |
Tertiary button with save icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--search |
Tertiary button with search icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--secure |
Tertiary button with secure icon to the left | .a-button--tertiary .a-button__icon |
||
.a-button__icon--share |
Tertiary button with share icon to the right | .a-button--tertiary .a-button__icon |
||
.a-button__icon--top |
Tertiary button with top icon to the right | .a-button--tertiary .a-button__icon |
||
.a-button__icon--upload |
Tertiary button with upload icon to the left | .a-button--tertiary .a-button__icon |
||
.is-disabled |
Disabled button with no states (greyed out) | .a-button |
||
.a-button--input |
Styling for buttons that are inputs | Yes | span |
This span is to directly surround the form input that requires button styling |
.a-button__inner |
Styling for buttons that are inputs | Yes | .a-button--input > input |
|
.a-button--full-width |
Make button stay full width of its container | .a-button |
||
.m-button-group |
Grouping of buttons left to right | Yes | ul |
|
.m-button-group--feature-three |
Modifier for button group - places second two buttons on same line at small screens | .m-button-group |
Only to be used with three buttons, with the first being a primary button | |
.m-button-group--pagination |
For placing next and previous buttons centrally. Next button appears before Previous button a small screen but to the right on medium or large screen | .m-button-group |
||
.m-button-group__item |
Grouping of buttons left to right | Yes | .m-button-group > li |
|
.m-button-group__item--previous |
Modifier for use with the pagination button group to adjust the alignement of the previous button | .m-button-group--pagination .m-button-group__item |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the button clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on a button, pressing SPACE or ENTER will open the link if a link or perform the form action. If the link is internal to the page it will scroll the page otherwise it will load the new page.