Creating buttons from your WordPress menu items is pretty simple.
The first step you need to do is to go to your WordPress Dashboard, navigate to Appearance and then click on Menus.
Ensure the CSS Classes option is enabled by opening the screen options and see if the CSS classes box is checked.
A new option should now show up in your menus.
Right there, enter a class of your choice and then click save menu.
I will choose hestia-btn, for example.
You can type anything you want over here but remember the text cause it will be used in the next step.
You could add this same class to multiple menu items or create other custom classes for other menu items.
This could be helpful if you want two or more different buttons, for example.
Now head over to Appearance, Customize then click on Additional CSS. Type in the following CSS over here.
You can simply copy and paste the ready-made code we put in the documentation.
Link to documentation:
This will turn the menu item into a button, as you can see here.
You can change the color by generating the HEX code for any color you want. For example, use a color picker, like this chrome extension on the Hestia demo website to pick the color of the button on the big title section.
That color code should be pasted over here then.
To make your button “flat” remove the border-radius line or just simply change these values to adjust its radius and make it look as you want.
Remember that you can make some pretty cool looking buttons by using different border-radius properties such as ”border-top-left-radius”, ”border-top-right-radius”, ”border-bottom-left-radius” or ”border-bottom-right-radius”.
The border-top-left-radius and the border-bottom-right-radius will generate this kind of button.
Cool, right? Of course, you can change the pixel value to a higher number if you wish to make a more significant curve.
As I mentioned previously, you could add different classes and then just change their colors by editing the code above with the name of your own CSS Class.
That’s it, we are done!
If you have questions, please leave a comment below the video and I will do my best to answer it.
WordPress Articles →
ThemeIsle is the go-to source for the High-Quality WordPress Themes (both free & premium), and plugins every website owner needs. We’re passioned about all things WordPress, but we’re not afraid to tackle other web related subjects. Our goal is to give those websites easy-to-use themes and designs that can be managed by everyone.