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 ButtonCall-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 style and create a button for your WordPress website

If you want to add a call-to-action button to your own WordPress website or blog, follow the four steps below:

  1. Copy and paste the Call-to-Action Button CSS snippet below into your child theme’s style.css file or into the Custom CSS Editor provided by the Jetpack plugin.
  2. Modify the color hex codes to suit your needs, or use this free online Call-to-Action Button Generator. 

Style CTA Buttons with CSS

/** call-to-action button **/
.cta {
  background: #ff7720;
  background-image: -webkit-linear-gradient(top, #ff7720, #EE6300);
  background-image: -moz-linear-gradient(top, #ff7720, #EE6300);
  background-image: -ms-linear-gradient(top, #ff7720, #EE6300);
  background-image: -o-linear-gradient(top, #ff7720, #EE6300);
  background-image: linear-gradient(to bottom, #ff7720, #EE6300);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  -webkit-box-shadow: 2px 2px 5px #666666;
  -moz-box-shadow: 2px 2px 5px #666666;
  box-shadow: 2px 2px 5px #666666;
  color: #ffffff;
  font-size: 20px;
  padding: 15px 25px 15px 25px;
  text-decoration: none;
 .cta:hover { 
  background: #EE6300;
  background-image: -webkit-linear-gradient(top, #EE6300, #ff7720);
  background-image: -moz-linear-gradient(top, #EE6300, #ff7720);
  background-image: -ms-linear-gradient(top, #EE6300, #ff7720);
  background-image: -o-linear-gradient(top, #EE6300, #ff7720);
  background-image: linear-gradient(to bottom, #EE6300, #ff7720);
  text-decoration: none;

Add Call-to-Action buttons in the WordPress Text Editor

  1. Open your WordPress page (or post) and switch from the Visual Editor to the Text Editor.
  2. Copy and paste the HTML code below where you want your button to appear. Of course, you’ll want to change the link and the button text.

Just like this:

<a href=""><button class="cta">Learn more about HTML & CSS</button></a>

Make CTA buttons accessible

The HTML code above is the right way to create an accessible button. An accessible button receives focus with keyboard navigation which is important for site visitors who use screen readers or assistive keyboards.

I’ve seen a lot of examples of the wrong way to make a button <div class=”button”>, <span class=”button”>, <a class=”button” href=””>. These look like a button but they don’t receive focus the way buttons should for keyboard navigation. So, use <button> not a div or a span!

And without further ado …

Here is our final Call-to-Action Button. Go ahead and click it; you know you want to!

Extend the Learning….

If you liked this post

  • Subscribe to get our blog posts sent to your inbox.

Have a question? Ask away… we’re happy to answer comments on our blog posts.

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

Leave a Reply

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