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!
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 li.menu-cta a {
border:2px solid #1e73be;
color:#1e73be;
font-weight:bold;
line-height:50px;
}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 li.menu-cta a:hover {
background-color:#1e73be;
border-color:#1e73be;
color:#fff;
}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.
