Website Design

How to add a Call to Action Button with CSS in WordPress

Photo of author

by Adam Wright

Today i’m going to show you a quick and easy way using CSS how to turn an ordinary navigation item into a call to action button.

You are welcome to watch the video tutorial embedded below, or feel free to read through the instructions.

Let’s dive in!

5 Epic Font Pairings You Can’t Go Wrong With

Tired of searching for fonts? With my 10+ years of design experience, I’ve put together the best font pairings for you to use, where to find them, and what industry they’re best for.

Get the Free Guide

Adding a CSS Class

This is the example we’re using today to create the call to action button. The Contact button here is an ordinary navigation item that i’ve styled using
CSS to turn into a call to action button — giving it more attention.

So the first type we’re going to want to do is go to your WordPress dashboard and we’re going to go to your navigation menu under Appearance > Menus to give that specific menu item a special CSS class.

What you want to make sure is click the Screen Options at the top and double check that “CSS classes” is checked, otherwise you won’t see the box
that we need in order to insert our CSS class.

Then, go to your Contact or whichever menu item you’re styling and you’ll want to give it a CSS class so that we can style that particular button. In this example i’m using “menu-cta” as the class, it’s something quick and easy which is usually best just so you can remember it.

So we’re going to go ahead and click Save Menu.

Add CSS code

Now that we’ve got our menu class in place, let’s jump over to the Customizer so we can add our CSS code.

Under Appearance, hit Customize in your lefthand sidebar menu in your WordPress dashboard.

Once in Customizer, at the bottom, hit ‘Additional CSS’.

So right now you’ll see the Contact menu item pretty much looks like any other navigation item — pretty plain, no style to it.

You’ll need to write some CSS code, pasted below, that will help you style this with a background color, font color, and some padding. You’ll want to adjust your line height based on your theme and navigation you’re using. In this demo, I’m using GeneratePress so a line-height of 50 pixels works fine for this example.

.main-navigation .main-nav ul a {
 border:2px solid #1e73be;

Now on hover we need to add some additional CSS to make sure and change that background color when you hover as well as change the font color.

.main-navigation .main-nav ul a:hover {

The key here is you’ll notice my menu-cta class is here — without that your button will not be styling. So if you’re having trouble, double check you spelled your class correctly as any small typo will break that CSS code.

Here’s the code in action:

Remember, you’ll need to tweak the CSS colors and border details to suit your website and design — this code will help you with a starting point.

CSS button made easy

That’s a quick and easy way to use CSS to create a call to action button in WordPress. Be sure to just save the code for future use, or even place it into your Starter Site template so you can reuse it over and over.

Photo of author


Adam Wright

Adam is a California native, now living in Middle Tennessee. A long-time creative at heart, his passion for design and growing his small business, AWD, is always evident. When he's not writing code or sketching logos, he enjoys spending time with family, playing basketball, or watching just about any motorsports. Find him on LinkedIn.

In the Design to Dollars newsletter, I'll bring you various bits of design knowledge I've gained over the years that have proven to help make a positive impact on businesses like yours.

You'll be able to learn more about how proper design principles can be applied to create more pleasing experiences for your customers, and therefore convert design into dollars.

Get the next newsletter delivered to your inbox!