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

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

How to create & style a call-to-action button that works

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:

  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 

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:

  1. Make your call-to-action button large enough to attract attention
  2. Use colour to draw your visitor’s eye to the button
  3. Make sure that your button actually looks clickable
  4. Button placement is important, choose a prominent position that is “above the fold” 
  5. 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

  1. Add the Buttons block
  2. Add the link text
  3. Type in the destination URL for the button
  4. 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.

Related Posts

If you liked this post, you might also be interested in one of these.
Connect Google Search Console With WordPress in Yoast SEO
Content Marketing Ideas_ How & Where to Find Ideas for Your Blog

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

    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.

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

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

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