If you need to add a button to the header menu of your website you do not need to switch to a theme that incorporates this functionality or install any plugin, you can easily do it with what WordPress already incorporates.
The only thing you will need is the following:
- Add a CSS class to the element of our menu that we want to turn into a button.
- Add some custom CSS.
Come on, it’s easy!
Table of Contents
Customize the menu item
The first thing we’re going to do is create a new item in our menu or modify an existing one, but first we need to make sure we have everything we need.
Open the WordPress customizer from Appearance → Customize or from the visible part of your website, whichever you prefer, and go to Customize → Menus and click on the little wheel icon above to activate the “CSS Classes” property as in the following screenshot….
With this active we have everything we need for our menu.
Now open the menu where you want to add the button and select the element you want to convert into a menu or add a new one, it doesn’t matter.
The important thing is that now you will see a new field, called “CSS Classes“, put inside menu-button, as in the following screenshot…
Add CSS
Now, without leaving the WordPress customizer, go to the “Additional CSS” section and add the following sample CSS code:
/* Menu element as button */
.menu-button {
background-color:#6dacff;
border:1px;
border-radius:9px;
-webkit-box-shadow:1px 1px 0px 0px #919191;
-moz-box-shadow:1px 1px 0px 0px #919191;
box-shadow:1px 1px 0px 0px #919191;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}Code language: CSS (css)You should immediately see how your menu item changes and takes on the appearance of a button…
Note: The button may not be displayed instantly in the customizer, it happens with some themes. If you don’t see it after adding the CSS, publish the changes and check the site, you should see the button.
What can I change in the sample CSS code?
Everything, pretty much!
The most important thing is that the CSS class is the same as the one you used in the “CSS Classes” box of the menu item.
From there you can customize the look to your liking:
background-color– The background color of the button in hexadecimal, in the example a light blue.border– Width of the button border in pixels.border-radius– If you want the button to have rounded corners, you can play with the amount of pixels or even set it to zero or remove this line if you want it completely square.box-shadow– Totally optional, you can define to show a shadow and the color in hexadecimal.- IDs
a,a:hoveranda:active– You can customize the color of the nice underline on hover, or set it as you prefer.
If you don’t dare yet to add or modify CSS I recommend you to take a look at this guide:
And that’s it. Now you know how to add buttons to your menus, easily, without plugins, without changing theme or anything like that, just with WordPress and a little CSS.
