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 to the WordPress Bu...  

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