Sharing is caring!

Usually, menu items are just simple text links, nothing fancy. Some WordPress themes provide a feature to add a button to your WordPress menu, but there are not that many. And those that allow you to do so are usually heavy, feature-rich themes, which you should avoid because they can impact your website’s loading time.

So, what can you do if you want to add a button to your WordPress menu to attract more attention and generate more clicks to a certain area of your website?

Well, you could use a plugin. But installing yet another plugin adds more bloat, potentially leading to other issues regarding loading time, optimization, security, and so on. I always say that the fewer plugins you have, the better!

So, what’s there left to do? Well, you can use some simple CSS code that you can easily add to your WordPress website. That’s what I’ll show you in this step-by-step tutorial.

Let’s get started!

The Advantage of Having a Button in Your WordPress Menu

Before getting to the main point, let me tell you the main reason why adding a button to your WordPress menu can be a good idea.

The reason is “Conversions”. Maybe you want visitors to create an account, or buy a product, or visit a certain page.

Transforming a simple text link from your menu into a button can help with that because it draws more attention. It stands out and visitors notice it more easily.

And if it’s noticed more easily, it means that more visitors will click on it, improving your CTR (Click-through rate). And getting more clicks means that you get more chances of conversion.

Let’s see a couple of examples of websites that currently have a button in their menu.

The first one is Medium, which is a popular online publishing platform.

As you can see, they have the Get started menu link turned into a button. That’s because their main goal is to get as many people to sign up to use their platform.

The second example is the Astra theme, which is a popular WordPress theme.

As you can see, they have a Download button in their menu. The button directs visitors to the Pricing page, where there’s a pricing table with plans and their features.

How to Add a Button to Your Menu in WordPress with CSS

After seeing the advantage of having a button in your WordPress menu, let’s see how you can add one with CSS.

CSS stands for “Cascading Style Sheets”. It’s a web development language that handles the design of a website, such as fonts, colors, layouts, and so on.

I’ll use that to transform a simple text link from the WordPress menu into a button. Because you won’t create a button somewhere else and add it there. You just need to style an existing text link. That’s how it’s done.

So, roll up your sleeves, and let’s get to work. 😀

Step 1

From your WordPress dashboard’s menu, go to Appearance > Menu.

Then, from the top right, bring down the Screen Options to enable the CSS Classes option by checking the box next to it.

Step 2

Click on the menu item’s arrow to bring up more options. You’ll see a CSS Classes field.

Add a hyphenated, descriptive, and unique name for the CSS class. It needs to be unique so it won’t potentially conflict with another class from your theme or a plugin.

In my example, I named my CSS class my-custom-menu-button. I’m pretty sure that no WordPress developer will name a CSS class like that. 🙂 So, there’s no potential conflict with other CSS code.

Step 3

Copy the CSS class that you added. Then, open up the WordPress customizer by going to Appearance > Customize > Additional CSS.

Some themes or plugins might rename it or even add it in another place. What I showed you is the default location and name.

There are other ways to add custom CSS to WordPress, but this is the easiest way.

Step 4

Now, I’ll show you what CSS code I used to create a button in my WordPress menu. Then, I’ll break it down a bit so you can understand it better.

This is the CSS code that I added to transform my Download menu link into a button.

/* Adding button to menu */
.my-custom-menu-button {
	background-color: #ff0000;	
}

.my-custom-menu-button a, .my-custom-menu-button a:hover, .my-custom-menu-button a:active {
	color: #ffffff !important;
}

.my-custom-menu-button:hover {
	background-color: #FF4D4D;
}

Now, let’s break it down a bit.

/* Adding button to menu */

This is just a comment so that, in the future, I know what the code is for. You should always comment on your code because you’ll forget what’s it for, trust me.

.my-custom-menu-button {
	background-color: #ff0000;	
}

The first thing I want to point here is that I added a dot (.) before the CSS class that I created at step 2, like this: .my-custom-menu-button. That’s mandatory for CSS classes, so always add a dot before.

The declarations with properties and values go between curly brackets { }.

The background-color is set to #ff0000, which is the hex code for the color red. This makes the button have a red background.

You can select colors and generate hex codes using this free web tool.

.my-custom-menu-button a, .my-custom-menu-button a:hover, .my-custom-menu-button a:active {
	color: #ffffff !important;
}

This part of the code changes the link’s color inside the button. Since black text on a red background doesn’t look so good, I made it white.

I also made the link stay white on hover and when it’s active, meaning when that particular web page is opened.

The color wouldn’t change to white on hover. This usually means that another CSS declaration was declared after mine, therefore overriding it.

So, I added !important to override all previous styling rules.

Alternatively, I could have been more specific by adding WordPress’ .main-navigation CSS class before each .my-custom-menu-button class, like this .main-navigation .my-custom-menu-button a. I wouldn’t need to add !important then.

But that default WordPress class might change, or you might want to add a button to your footer menu, for example. So, to make things easier for you, I added !important instead.

You can try without it to see if it works for you.

.my-custom-menu-button:hover {
	background-color: #FF4D4D;
}

The last part of the CSS code changes the button’s background color on hover. That way, the users can easily see that they’re hovering over it.

More Types of CSS Buttons for Your WordPress Menu

What I previously showed you is a standard type of button that you can add to your menu in WordPress. Let’s see some CSS code for other types of buttons that you can create.

Pill button

A pill button is a button that’s rounded. Here’s the code:

/* Adding pill button to menu */
.my-custom-menu-button {
	background-color: #ff0000;
	border-radius: 26px;
}

.my-custom-menu-button a, .my-custom-menu-button a:hover, .my-custom-menu-button a:active {
	color: #ffffff !important;
}

.my-custom-menu-button:hover {
	background-color: #FF4D4D;
}

The only difference is here:

.my-custom-menu-button {
	background-color: #ff0000;
	border-radius: 26px;
}

I added a border-radius with a value of 26px (px = pixels). You can change that value to whatever you like. For example 5px, 16px, 20px, 32px, etc.

Outline button

An outline button only has a border. The background color is usually added on hover.

Here’s the code:

/* Adding outline button to menu */
.my-custom-menu-button a {
	border: 2px solid #222;
}

.my-custom-menu-button a:hover {
	background-color: #ff0000;
	border: 2px solid #ff0000;
}

.my-custom-menu-button a:hover, .my-custom-menu-button a:active {
	color: #fff !important;
}

This one has more modifications:

1. I added a black border with a transparent background;
2. Then, on hover, I added a red background with a red border that’s equal to the initial one. This makes all the button red on hover;
3. I changed the link color to white, on hover, when the button turns red.

Rounded outline button

To make an outline button rounded, you only need to add a border-radius, as you’ve seen in the pill button example.

/* Adding rounded outline button to menu */
.my-custom-menu-button a {
	border: 2px solid #222;
	border-radius: 26px;
}

.my-custom-menu-button a:hover {
	background-color: #ff0000;
	border: 2px solid #ff0000;
}

.my-custom-menu-button a:hover, .my-custom-menu-button a:active {
	color: #fff !important;
}

Remove the Button from the WordPress Menu on Mobile Devices

Usually, on mobile devices, the menu items are collapsed into a hamburger menu or something like that. So, the menu items are revealed vertically on screen tap.

Therefore, you might not want a button in there, especially if it doesn’t look good and more CSS code is needed to style it.

If that’s the case, you can wrap one of the above CSS codes in a media query:

@media only screen and (max-width: 1024px) { }

So, the CSS code for the WordPress menu button should look like this:

/* Adding button to menu - mobile devices excluded */
@media only screen and (min-width: 1024px) { 	
	.my-custom-menu-button {
		background-color: #ff0000;	
	}

	.my-custom-menu-button a, .my-custom-menu-button a:hover, .my-custom-menu-button a:active {
		color: #ffffff !important;
	}

	.my-custom-menu-button:hover {
		background-color: #FF4D4D;
	}
}

This only shows the button in your WordPress menu when the viewport is over 1024px (px = pixels), which usually means screens bigger than tablets on landscape mode.

As you can see from my screenshot, the viewport is under 1024 pixels, so my menu collapsed. It now reveals the menu items when the Menu button is tapped.

And, as you can notice, the Download menu item is not shown as a button. It’s just plain text as the others.

The End

I hope that the tutorial was comprehensive enough, and you managed to add a button to your menu in WordPress with CSS.

It’s a pretty easy solution that saves you from adding yet another plugin to the pile.

If you need help, have questions or thoughts, please feel free to leave a comment below.

Sharing is caring!