Best SEO and PPC Tool - Extended Free Trial  GO!
How to Add a Button on Menu WordPress

How to Add a Button on Menu WordPress

Last modified: May 27, 2022

FAQ
Cloudways

Are you looking to create a menu item on your WordPress website that is a button? This might not seem possible, but it is. All that you need to do is to create the menu item and then add some CSS coding to your WordPress website to convert the menu item into a button.

Show More

* This button will show the rest of the post and open up an offer from a vendor

Why use a Button on your Menu in WordPress?

There are numerous reasons why you might want to use a button on your WordPress website menu. For one, it might be for an item that is of particular importance. And therefore, you want to add some extra importance to the item.

A button will look very unique and can draw the attention of the audience onto the item. Therefore, you might get more people clicking through and having a look at the page. Another reason is that you want to increase the number of people who click through on other devices and the button will improve the clickability of the menu item.

Or you might just like the look.

Add a Button to your Menu Item

The first thing that you will need to do is add the menu item to your website.

Step 1 – Log In

Log into your WordPress website and start on the homepage for the WordPress dashboard.

Step 2 – Menu

Now you need to access your WordPress menus. This can be done by clicking on ‘Appearance’ and then ‘Menus’.

Step 3 – Select Menu

Now you can select the menu that you would like to add the item to.

Step 4 – Add Menu Item

Now you need to add the menu item that you would like to become a button.

... and Scan WP's recommended web hosting company is... Cloudways (Click for special deal)

Step 5 – Save

Now save the menu.

Step 6 – Extra Settings

Now you need to click on the arrow that is on the menu item to expand the extra settings on the menu link.

If you don’t see the arrow, you might need to enable them from the upper right corner of the screen. You can select the option that reads ‘CSS Classes’ in the ‘Show advanced menu properties’.

Step 7 – CSS Classes

Now in the CSS classes field, enter a class for the menu item.

It is the best practice to prefix the class with a letter string that is unique for the class. This prevents a potential conflict with other built-in classes.

Step 8 – Save

Now save the menu again.

Step 9 – Custom CSS

Now you need to add some CSS code, to do this go to the ‘Customize’ option for the theme and find the ‘Custom CSS’ option.

Step 10 – Add the Code

Now you need to add the following code for the button to be added. Remember to make adjustments for your unique custom class that you used in Step 7. Other settings for the appearance of the button can also be changed.

.fl-page-nav .navbar-nav > li.ss-nav-button {
padding: 15px;
}
.fl-page-nav .navbar-nav > li.ss-nav-button > a {
padding: 10px 15px !important;
color: #ffffff !important;
border-radius: 7px;
background-color: #0f637d;
}
.fl-page-header-fixed .fl-page-nav .navbar-nav > li.ss-nav-button > a {
position: relative;
bottom: 7px;
}
.fl-page-nav .navbar-nav > li.ss-nav-button > a:active,
.fl-page-nav .navbar-nav > li.ss-nav-button > a:hover {
color: #ffffff !important;
background-color: #196f8c;
}

Step 11 – Save

Now you can save the custom CSS.

Final Word: How to Add a Button on Menu WordPress

Above are the instructions on how to add a button on the menu in WordPress. They are easy to follow and quick to apply. Or you can use some nice plugins to help you make it happen, like this buttons plugin here.

Recap:
Save 4 Later
Email liked links to yourself