How to Create and Style a Call-to-Action Button in WordPress

How to Create and Style a Call-to-Action Button that Works!

What is a Call-to-Action Button?

Call-to-action (CTA) buttons guide visitors where you want to take them on your website. CTA buttons are important website elements because they

  1. Grab site visitors’ attention
  2. Encourage them to take a specific action
  3. Guide your visitors’ journey through your site
  4. Influence visitors to click through 

Some common examples of CTA buttons are:

  • 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 a Call-to-Action button great?

This article from the Canva design blog gives some great advice for creating a CTA button. Here are just some of the points:

  1. Make the call-to-action button large enough to attract attention (in proportion to other elements on the page)
  2. There’s no magic button colour that converts the best, but colour is still an important choice
  3. Make sure that your button actually looks clickable
  4. Button placement within the overall page design is the final step. Choose a prominent position that is “above the fold” 

How to Create and Style a CTA Button with Button Blocks

  1. Select a button block in your content
  2. Add the link text
  3. Type destination URL for the button
  4. Click apply

Voila! You’ve created a CTA button.

To Add Some Style to Your Button

In the right sidebar click on style. Select your button style

  • Rounded
  • Outline
  • Square

Finally, choose your button colours and location

  • Set a background colour
  • Select a text colour
  • Float (align) the button to the left, right or center

Extend your Learning…

If you liked this post, you’ll love one of our LearnWP Workshops.

Currently (2020), we provide one-on-one training.

Related Posts

If you liked this post, you might also be interested in one of these.
How to remove comments from WordPress pages
Be a better blogger checklist

9 thoughts on “How to Create and Style a Call-to-Action Button that Works!”

  1. 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?

    1. 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.

  2. 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!

  3. 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. 🙂

  4. 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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top