How To Create Buttons From Your WordPress Menu Items (Fast & Easy) - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress ThemeIsle Video: How To Create Buttons From Your WordPress Menu Items (Fast & Easy).
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: https://bit.ly/2RDHnCh

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.

Website → https://themeisle.com
WordPress Articles → https://themeisle.com/blog/
Facebook → https://www.facebook.com/themeisle/

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.

Published: Friday, August 16, 2019 12:17 PM
Category: Wordpress ThemeIsle

101 Views

Related Videos

Create Fast and Easy to Use WordPress Online Course Website in 2020

by Best Webhosting Added 4 years ago 90 Views / 0 Likes

Hi, fellow content creators and welcome to my WordPress online course website and e-learning platform tutorial. In this video series, I will teach you how to start your online course website on WordPress, with Neve Pro and Lifter LMS. You will learn how to design your pages and then how to create your first online course step by step. This is something you can do on a new WordPress website but you can start selling online courses on already running we
How to Create An Online Store With WordPress In 2019 (FAST & EASY)

by Best Webhosting Added 4 years ago 91 Views / 0 Likes

Creating an online store with WordPress and WooCommerce, step by step is easy. Just follow the steps in this video. Get WooCommerce optimized hosting (with discount*): http://bit.ly/WPHostingOffer WooCommerce vs Shopify: https://youtu.be/6EzNbhaZWSc When starting to create an online store, you just need to follow these 3 steps: 2:17 (Step.1) Get a catch Domain Name + Hosting 9:05 (Step 2) Setup WordPress + WooCommerce 21:30 (Step 3) Customize your web
BULK MENU EDIT: How To Drag or Remove Multiple Menu Items At Once In WordPress?

by Best Webhosting Added 2 years ago 27 Views / 0 Likes

In today's video tutorial we'll learn how to edit the WordPress navigation menu in a bulk in order to save your time while moving or removing multiple menu items in a simple, fast, and free way. How To Edit WordPress Menus https://visualmodo.com/edit-wordpress-menus/ Organizing WordPress Navigation Menu Items https://www.youtube.com/watch?v=xUaGHqQVUis How to Create Multilevel Hierarchical Menus in WordPress? https://www.youtube.com/watch?v=tESYjU4sOD
Popular
WordPess. How To Hide Menu Items In Mobile Menu But Keep Them On Desktop Layout

by Best Webhosting Added 4 years ago 107 Views / 0 Likes

This tutorial shows how to hide menu items in mobile menu but keep them on desktop layout in WordPress. Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts199 Enjoy Premium WordPress templates at our website: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts199
Shopify. How To Manage Columns Count In The Mega Menu Menu Items

by Best Webhosting Added 4 years ago 91 Views / 0 Likes

This tutorial shows how to manage columns count in the Megamenu menu items in Shopify. Enjoy Shopify Templates from TemplateMonster: http://www.templatemonster.com/shopify-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=shfytuts86 More Shopify Video Tutorials: https://www.youtube.com/playlist?list=PLhQIfRNfwAod93xXBmMfBlo6oH9HcjKNj Subscribe Our Channel: https://www.youtube.com/user/TemplateMonsterCo/ Follow us: Facebook https://www.faceboo
Joomla 3.x. How To Manage Top Menu And Change Menu Items Order

by Best Webhosting Added 4 years ago 98 Views / 0 Likes

This tutorial will show you how to add a new menu button in Joomla. Enjoy Premium Joomla Templates at Our Website: http://www.templatemonster.com/joomla-templates.php?utm_source=youtube&utm_medium=link&utm_campaign=jootuts155 More Joomla Tutorials: http://www.templatemonster.com/help/cms-blog-templates/joomla/joomla-tutorials/ Subscribe Our Channel: https://www.youtube.com/user/TemplateMonsterCo/ Follow us: Facebook https://www.facebook.com/TemplateMo
WordPress. How To Change Menu Items Background

by Best Webhosting Added 4 years ago 87 Views / 0 Likes

This tutorial is going to show you how to change menu items background in WordPress template(s). Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts275 Choose your WordPress template now:http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts275 Subscribe Our Channel: http://goo.gl/z
Popular
WordPress. How To Rename Dashboard Menu Items

by Best Webhosting Added 4 years ago 104 Views / 0 Likes

This tutorial is going to show you how to rename admin menu items in WordPress. Choose your WordPress template now: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts167 Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts167 TOP WordPress Themes: https://www.youtube.com/playlist
Organizing WordPress Navigation Menu Items

by Best Webhosting Added 4 years ago 90 Views / 0 Likes

In today's WordPress video tutorial we'll learn how to organize your WordPress navigation menu items and how to fix the menu breaking lines issue in a simple and easy way. We also going to move menu items to create sub-items. WordPress themes download https://visualmodo.com/wordpress-themes/ WordPress sub-menus guide https://www.youtube.com/watch?v=Zh6X8A37Ld4 Menus creation guide https://visualmodo.com/wordpress-menu-building-guide/
How To Design Buttons In Elementor | 8 EASY Elementor Button Styles You Can Create In 5 min

by Best Webhosting Added 4 years ago 87 Views / 0 Likes

In this video, you'll learn how to design buttons in Elementor. Check out 8 AMAZING Elementor button styles that are extremely easy to recreate. For top-notch Elementor templates, visit Elementor Marketplace https://www.templatemonster.com/elementor-marketplace/ 8 EASY Button Styles In Elementor 00:04 Simple Material Design 00:27 Gradient Button 01:01 Rounded Corners 01:18 Sharp Corners 01:46 Sharp Corners + Icon 02:11 White Button with Shadow 02:52 B
WordPress. Changing The Order Of Admin Menu Items

by Best Webhosting Added 4 years ago 89 Views / 0 Likes

This tutorial is going to show how to change the order of admin menu items in WordPress. Choose your WordPress template now: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts158 Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts158 TOP WordPress Themes: https://www.youtube.com
How to Hide Unnecessary Menu Items From WordPress Admin

by Best Webhosting Added 2 years ago 21 Views / 0 Likes

Do you want to hide unnecessary menu items from the WordPress admin area? WordPress is a fantastic platform for creating websites but for some clients and users, the Admin area can be cluttered with menu items that they just don't need to see. By cleaning up the Admin area and hiding menu items it can stop users from accidentally changing important site settings and also helps keep them focused on the options they need. In this video, we are going to