What is a Call-to-Action Button?
A Call-to-action (CTA) button guides visitors where you want to take them on your website. CTA buttons are important website elements because they:
- Grab site visitors’ attention
- Encourage them to take a specific action
- Guide your visitors’ journey through your site
- Influence visitors to click through
Typical CTA Buttons You’ll See Around the Web
- Start Your Free Trial
- Subscribe to our Mailing List
- Register for our Workshop
- Buy Now or Add to Cart
- Request a Quote
- Join Now
- Download
- Learn more
What makes an outstanding Call-to-Action button?
To have an effective CTA button:
- Make your call-to-action button large enough to attract attention
- Use colour to draw your visitor’s eye to the button
- Make sure that your button actually looks clickable
- Button placement is important, choose a prominent position that is “above the fold”
- With the Buttons Block you can add multiple buttons but, for a good CTA, limit the number of options you give the user. Make the choice for them.
How to Create and Style a CTA Button with The Buttons Block
- Add the Buttons block
- Add the link text
- Type in the destination URL for the button
- Click apply
Voila! You’ve created a CTA button.
Now … To Add Some Style to Your Button
In the right sidebar click on style. Select your button style
- Fill or Outline
- Set a Text Colour
- Set a Background Colour
- Adjust the Border Radius – for rounded edges
- Link Settings – open in a new tab
The Marketing Button Block in the Ultimate Addons to Gutenberg Plugin
We’re fans of the Ultimate Addons for Gutenberg Plugin. This plugin adds a library of blocks to your WordPress Editor and gives you several pre-designed CTAs for you to add to your pages or posts. In particular, check out the Marketing Button Block.
As the Plugin authors say: “The Marketing Button block allows you to create trendy CTAs that aim at attracting the audience with conversion-oriented text and a stunning button with lots of customization.” Check out this great example of the UAG Marketing Button in action.
Extend your Learning…
If you liked this post, you’ll love our WordPress Made Easy Online Course. Perfect for WordPress website owners and users who want the skills and knowledge to create and manage a WordPress website.
Thanks for the article.
I am looking for something like showing a bell icon to show tips or bring attention to the text. Please explain, how to do it?
Hi Sandi,
Install and activate the Ultimate Addons for Gutenberg plugin. Then instead of adding a regular button add a Marketing Button block. This block comes with a selection of icons.
I figured it out. For some reason, in my template, I had to turn on border color to match the button. when the border color was off i had a thin dual color border around the button. anyway i am happy now thanks for this article is was super easy aside from that small error!
Why does my button have a super thin border around it even though I didn’t check the border box???
Worked like a charm. I had to fiddle with the fixed position of the button to get it where I wanted on the page but the styling is great. Although some monitors appear to have issues with the gradient displaying correctly on the border and inside the button. Besides that I’ll use this every time! Thank you. 🙂
Thank you so much! can you please help me add a susbcribe button?
Great content I love your post I will use this on my blog since it’s so simple to add, thanks a lot.
Awesome tutorial Ruth. Thanks for sharing.
This was a great inspiration. It triggered my testing a plugin for a CTA button and finding a great one called MANGO button plugin. A very simple CTA button installation plugin. Just great!
Thank you folks for the trigger the idea. I would never have thought of it on my own. Subscribing to your automatic newsletter notes is fantastic.
Richard Szpin