How to Easily Add Buttons to the Nav Menu in WordPress (no plugins)

Learn to add buttons to your Wordpress menus, by adding a CSS Class to a menu item, then styling it. We'll build two button styles, including icons & animations.
***************************
Video Chapters
**************************
0:00 - What we're building
0:23 - Adding a new menu item
1:00 - Add a CSS class to menu item
2:28 - Where to put CSS code
3:14 - Which CSS selectors to use (important!)
4:33 - Ghost button style (outline button)
8:29 - Solid Button Style
11:09 - Add icon w/ Pseudo-element
15:03 - Outro and more tips
In this video, you'll learn how to enable CSS classes for your menu items, how to target those classes with CSS styles, and easily create custom button designs.
We'll build two button styles, an Outline/Ghost button, and a solid button with gradient background and icon.
As far as adding icons, I prefer to use CSS pseudo-elements (:before and :after) to add icons to my buttons. They're really handy once you get the hang of them.
Icon sources: You can use Unicode characters or well-supported emojis for your buttons. This is the easiest method because you don't need to enqueue a separate stylesheet like FontAwesome. Just make sure to set your font-family to a system font (like Arial) if using Unicode.
Alternatively, you can use FontAwesome icons as demonstrated in this video:
• Add Icons & Animations...
You can animate your button hover states using the 'Transition' CSS property, which will smoothly animate the changes in your button properties between the hover and non-hover state.
#wordpress #menubutton #css

[@steven36511]

One of the best videos on WP coding/additional CSS! And a prime example of how the quality of a RUclips post cannot / should not be judged by the number of views. Thanks!

[@BuildThatWebsite]

Much appreciated! Do you have any suggestions/ideas for future videos?

[@steven36511]

@@BuildThatWebsite (Maybe providing the codes as texts in the description section above will make your posting even more appreciated.^^)

[@dsurajev]

Man, this helped me out so much! I couldn't figure out why my custom css wasn't applying to my buttons until I saw this guide on how to properly target the element. Thank a ton man, hope you're doing great! Subscribed and liked, keep the quality content coming!

[@WorldEnglishBlog]

Great stuff AGAIN. Thanks Matt, your videos always show me what is possible (and what I've been missing) on my WordPress site. 👍

[@BuildThatWebsite]

Thanks for great feedback again! Is there anything in particular you'd like to learn, or want to build for your own site(s)?
I'm always looking for new video topics.

[@WorldEnglishBlog]

@@BuildThatWebsite I like to embed Google quizzes (HTML) to keep people on my site but they slow down my page speed. Anything related to improving page speed would be very helpful.

[@paulhildmann8392]

Great video, thanks for the CSS tutorial. Off to watch the FontAwesome video 😉

[@BuildThatWebsite]

Yeah, it's clearly time for me to do a comprehensive FontAwesome video. I use it on all my sites, but it can be tricky when you're getting started. Good luck!

[@Klaus53123]

Matt, your tutorial are amongst the best I have ever seen on RUclips. Looks like you are a very knowledgable guy! Of course I did hit the subscribe button. One beginner subject you might find meaningful to make a video on is how to use google chrome inspector to identify the right ids and classes to make customs css to wordpress. I would appreciate this a lot…. Now I will watch the next of your videos….. I wish you good luck with your channel which I would like to see grow a lot!

[@BuildThatWebsite]

Thanks so much for the kind words Klaus! Could you clarify what exactly you're looking for in an 'inspector video'.
Here's my best guess:
1. A brief overview of chrome inspector. Understanding the layout and where to find what you need
2. Choosing which classes or ID's to target
3. Basics of CSS selectors to help you understand how to write your CSS rules to target the elements you intend to. Things like parent/child hierarchy of elements and maybe some basic pseudo-classes like :hover
Or should that be divided into several videos:
1. Chrome inspector interface
2. CSS box model
3. CSS selectors
Let me know if I missed anything!

[@Klaus53123]

@@BuildThatWebsite Both options sound great for me. I am really new to CSS so for me it can’t be comprehensive enough. Maybe other viewers would also comment….

[@roppor2194]

even more content -> You great 👍

[@BuildThatWebsite]

Thank you, glad you found it helpful! 🙏

[@ahmedd.masoud6809]

Thank you

[@asaserge9089]

Thanks, you save my Job 🎉🎉🎉🎉

[@BuildThatWebsite]

Happy to help!

[@Gopalsingh-sg7su]

thnks

[@oriyomipelumi7619]

Would this work on a sub menu?

[@findacarusa2435]

What about moving the position of the button?

[@sergio_grez]

Thanks man, but what about mobile??