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

What is a Call-to-Action Button?

A Blogger's Guide | How to Create & Style 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
Due to the current recommendations from Ontario Public Health and Health Canada regarding COVID-19 and social distancing, we are postponing our 2-day WordPress Intensive and SEO for WordPress workshops. To help people who require WordPress training, instruction or courses during this time, we can provide online training. Just send us an email. Subscribe here to get our blog posts sent to your inbox.

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


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


  2. Great content I love your post I will use this on my blog since it’s so simple to add, thanks a lot.


  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. Why does my button have a super thin border around it even though I didn’t check the border box???


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


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

Leave a Reply

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