How to Add a Button on Menu 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.

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

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

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

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

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

Now save the menu.

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’.

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.

Now save the menu again.

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.

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;
}

Now you can save the custom CSS.