Buttons are used to highlight calls to action for users to take, such as making a booking. They can link to other pages in your site or to external websites. Use them sparingly - try not to use more than one button in any single group of content.
The button is blue and changes to a lighter blue when the mouse is hovering over it.
Secondary buttons are a lighter shade of blue. They are only used if a second action is needed in addition to a primary action, for example a 'Submit' and 'Cancel' button.
How to build buttons
A button can be added to any content template. You need to be in a Basic text content component.
To insert a button:
- Put your cursor on its own line.
- Click the small page icon and choose primary/secondary button.
- You’ll see some dummy text (hyperlinked) on your screen.
- Replace it with your button text. The easiest way to do this is:
- put your cursor after the first letter
- type your button label
- use the delete and backspace buttons to delete the dummy part of the text.
- (Another way is to click on the Source button and change in the HTML code, but only do this if you're confident with HTML.)
- Put your cursor within the hyperlinked label text and click on the Link icon. You’ll see a popup.
- In the URL field, delete ‘Primary-button-link’ and:
- if it’s a link to a page in the CMS, start typing the title of your destination page; choices will appear; select the correct page title
- if it's a link to an external site, copy and paste the URL, including https://
- Type a title and click Save.
Reviewed 30 March 2021