Buttons
Intro
Buttons or calls-to-action links are a key route to drive traffic to the right place. It's important the button sizing and appearance meets the context they are placed in.
Outline Hero Buttons
These are buttons that are overlayed on background images. The larger CTA button is suitable at the top, where a feature is displayed. The default hero button is more suitable for common use further down a page, over sub-sections or categories.
CTA HERO BUTTON
The colour is dependent on background and contrast required, white is default.
STANDARD HERO BUTTON
Hovering over a button will change to a solid background and inverted text colour.
Solid Hero Buttons
These are essentially solid versions of the outline buttons above, with no border. They invert on hover.
CTA HERO BUTTON
The colour is dependent on background and contrast required, white is default.
STANDARD HERO BUTTON
Hovering over a button will change to a solid background and inverted text colour.
Functional Buttons
These are standalone buttons, often used in forms. These are follow the solid form above but with brand gold background on-hover.
LARGE BUTTON
Used rarely over the standard size. Where we don't want the customer to miss this call to action.
STANDARD BUTTON
Hover will change the background colour to the brand off-black.