Primary and secondary buttons

Primary and secondary buttons should have a clear colour distinction. Primary buttons must use the CTA colour #00703C and appear first, secondary buttons should use lighter colours to help emphasise the primary page interaction.

Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.

button {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
padding: 0.75rem 1rem;
width: fit-content;
color: #fff;
font-weight: 600;
font-size: 1.125rem;
border-radius: 4px;
background: #00703C;
box-shadow: 0 3px 0 0 #005A30;
}
.secondary {
background: #f1f1f1;
color: #000;
border: 1px solid #c1c1c1;
box-shadow: 0 3px 0 0 #c1c1c1;
}

Action buttons

Action buttons like ‘Start now’ or ‘Next page’ should include an arrow that points to the right. The text should be emboldened.

.cta::after {
content: '';
-webkit-mask: url(/wp-content/themes/scc-partner/assets/image/icons/arrow_right.svg) no-repeat 50% 50%;
mask: url(/wp-content/themes/scc-partner/assets/image/icons/arrow_right.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
width: 24px;
height: 24px;
display: block;
background-color: #fff;
margin-left: 0.5rem;
}

You can download the arrow we use as an SVG, if you can’t use the SVG please use an icon that is as close as possible.

Action button arrow – SVG

Right pointing arrow to be used on all action buttons

SVG, 418 bytes

Buttons on dark backgrounds

Use the .inverted class to show white buttons on dark backgrounds — for example, in headers, custom components, and patterns with darker backgrounds.

Make sure all users can see the button — the white button and background colour must have a contrast ratio of at least 3:1.

.inverted {
background: transparent;
border: 2px solid #fff;
box-shadow: none;
color: #fff;
}

Button alignment

Use a button group when two or more buttons are placed together.

Any links within a button group should align with the centre of the buttons.

Interaction states

All buttons should have effect states for hover, focus and active. State changes give the customer reassurance they can interact with the element and help understand what to expect while interacting with the component.

::hover {
background: #005A30;
}
::focus {
border-color: #f5CE3E;
outline: 3px solid transparent;
-webkit-box-shadow: inset 0 0 0 2px #f5CE3E;
box-shadow: inset 0 0 0 2px #f5CE3E;
}
::focus:not(:active):not(:hover) {
border-color: #f5CE3E;
color: #000;
background-color: #f5CE3E;
-webkit-box-shadow: 0 3px 0 #000;
box-shadow: 0 3px 0 #000;
&::after {
background-color: #000;
}
}


When to use this element

Use a button to help users carry out an action like starting an application or saving their information.

When not to use this element

Buttons shouldn’t be used to move a customer between topics, to send them to a different content page or to link to an external resource.

Button text

Button text should be short and describe the action the button performs.

• ‘Start now’ at the start of the service
• ‘Sign in’ to an account a user has already created
• ‘Continue’ to move to a different concept, see form layout for more information
• ‘Save and continue’ when the service does save a user’s information
• ‘Save and come back later’ when a user can save their information and come back later
• ‘Add another’ to add another item to a list or group
• ‘Pay now’ to make a payment
• ‘Confirm and send’ on a check summary page that does not have any legal content a user must agree to
• ‘Accept and send’ on a check summary page that has legal content a user must agree to
• ‘Sign out’ when a user is signed in to an account