Buttons
Intermediate Training Module 2: Common Content Blocks
Buttons are used to draw attention to important links and actions on your website. Unlike standard text links, buttons stand out visually and encourage visitors to take a specific action.
This type of action is often referred to as a Call to Action (CTA).
Common examples include:
- Apply Now
- Register
- Contact Us
- Learn More
- Download PDF
- View Program Details
Buttons can help guide visitors through your website and improve navigation when used thoughtfully.
When to Use a Button
Use a button when you want visitors to take a specific action.
Examples include:
- Visiting another page
- Downloading a document
- Registering for an event
- Submitting a form
- Learning more about a service
For simple references within a paragraph, a standard text link is usually sufficient. Buttons should be reserved for important actions.
Adding a Button
To add a Button block:
- Click the + button and search for Buttons.
- Select the Buttons block.
- Click within the button area.
- Enter the text you want displayed on the button.
Examples:
- Apply Now
- Register Today
- Contact Us
- View Resources
Adding a Link
A button becomes functional once a link has been added.
To add a link:
- Select the button.
- Choose the link option from the toolbar.
- Enter or search for a URL.
- Apply the link.
Visitors who click the button will be taken to the specified destination.
Button Alignment
Buttons can be aligned within the page to match surrounding content.
Common options include:
- Left
- Centre
- Right
In most cases, align buttons consistently throughout a page to create a more polished experience.
Button Styles
Depending on your site’s configuration, multiple button styles may be available.
Common styles include:
Primary Button
Used for the most important action on the page.
Secondary Button
Used for supporting actions.
Limiting the number of button styles on a page helps maintain visual consistency.
Button Width
Buttons can often be displayed at different widths.
Examples include:
- 25%
- 50%
- 75%
- 100%
Use wider buttons sparingly and only when they improve readability or accessibility.
Writing Effective Button Text
Button labels should be action-oriented and clearly describe what will happen when clicked.
Good Examples
- Apply Now
- Register Today
- Download Guide
- View Events
- Contact Us
Avoid
- Click Here
- More
- Go
Good button text improves usability and accessibility.
Best Practices
Focus on One Primary Action
Each section should typically have one main call to action. Too many buttons competing for attention can make decisions more difficult for visitors.
Use Clear Labels
Visitors should immediately understand where a button will take them.
Keep Text Short
Most button labels should be a few words long.
Be Consistent
Use similar button styles and placement throughout your website.
Don’t Overuse Buttons
Reserve buttons for important actions. Too many buttons can reduce their effectiveness.
-
Hello and welcome to cutheme Mastery training Module 2. In this video, we will cover buttons.
Buttons allow users to link to other content on their website. By clicking on a button, viewers are redirected to wherever that button links to. There are different ways that you can customize buttons on cutheme which we will go over now.
To add a button, click on the Block Selection menu, and under design, click on buttons.
When the button is added, you’ll get a formatting menu above. You can click on the button and type what you want the button to say.
You can change the button’s alignment – either left, center or right. You will need to add a link to the button to pass the accessibility check and to make it functional. to do that, highlight the text then click on the chain icon. You can either select a page from your website or paste the URL into this text block. Then click Apply.
To add more buttons to your block, click on the block’s background and click the blue plus sign on the right. Now you’ll have all the same options for this button as the original one.
Over on the right hand side, you’ll see you have some options for the button itself. In order to style it, click the Styles icon. The default is red. You can also select light gray to make your button light gray.
Lastly you can choose how much of a line your button takes up – either 25%, 50%, 75% or 100%.
Try it Out
Practice working with the Buttons block.
- Add a Buttons block to a page.
- Create a button labelled Learn More.
- Add a link to another page on your website.
- Change the alignment.
- Experiment with different styles and widths.
- Preview the page and test the button.