Call to Action Buttons Overview
This page will show the simplest way to make a link appear like a coloured button.
See Call To Actions button in action
See the demo here
How to Make a Link look like a Coloured Button
Go to the Page Editor where you want to add your coloured Button in
Type in the text for your coloured Button
Highlight the text and click on the Link button (located on the 2nd row near the Flag icon button)
Enter the URL for the link
Click on the Advanced Tab at the top right
Enter the ID on the field under ID
- For example, event-cta
Enter the class under Stylesheet Classes
- For example, red(see table below for other colour references)
After entering the ID and/or classes, click OK
Scroll down and click on Save and Close on the page editor as you would normally save a page update
Refresh the page - now you can see the new coloured button applied to your link.
See output video here
- If you do not follow this guide but the button is styled. Please follow the step below.
- Please update the Page Template of the page to include "/Content/Shared/Template.min.css" if you are not sure, please look at this guide How to use and manage page templates in WebEd 9
The below table lists the different colours available by their class name. You will use the class name when creating the link to specify the colour of the button.