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

hello builders i'm matt from build that website and today i'm going to show you how to add buttons to your wordpress menu now i got two different styles for you and then we're going to add some icons and maybe some cool hover animations just to round things out now if you're new here i would love it if you subscribe to the channel we'd be thrilled to have you and we have some great stuff coming up timestamps are down in the video description and let's get started so first we need to add the link to the menu that we want to turn into a button so to do that we're going to go to the dashboard and we'll go to appearance and then menus the menu item that you're going to add might depend on whether you're linking to an internal page or an external resource but we're just going to use the custom link in this example but you could use pages or posts just the same if you want so i'm just going to make it a link to youtube and we'll pretend that's the link to my youtube channel and we could just say subscribe as the link text now we're going to add that to the menu and of course you're going to position it where you want it i want it at the end of my menu so this is a good position now the next step is we need to add a css class and i've already enabled this option but you may not have this option available so if you don't see it you're going to go up here to the top and go to screen options and you want to make sure that the css classes menu property is enabled now you'll be able to come back to your menu item here and we're going to add a css class and you can name it whatever you want i like to use something descriptive but i'm just going to go with menu button now we'll save the menu and one more trick while you're here in the screen options if you want to be able to set a nofollow attribute for your button you would want to select this so that that lets you set a link rel and also enable the link target this will allow you to open it in another window if you want and now when we go to our button settings here you can see we have the option to open a new tab and you could also set the link relationship so for example you can put nofollow or sponsored in this box and i will apply that attribute on the front end now back on the front end of the site you can see our menu item that we created and it doesn't look any different than the menu items that we had previously so we need to style it and to find the css class that we added we can just right click and in most browsers you'll have an option to inspect this is uh in chrome and if we see the structure of our menu item here it's a list item and it's added the custom class name that we put in there so i use menu button so here's the class so we're going to write a rule for the a element that is inside the class menu button now if you've never written css code before you might be wondering where in your theme or where on your site you should put it because your menu is going to be on every page of your site it's a good idea to put it in a style sheet that will be loaded on every page of your site so you have a couple options one is built into the wordpress customizer now we have if you scroll to the bottom we have this additional css option and you can just put all your css code here and this is a great place to put it if you don't already have somewhere else that you like to put your css code otherwise some people have a separate plugin for example i have custom css pro installed on the site one more good option is if you have a child theme installed on your site and you go to appearance and then theme editor in your theme files here you can edit your stylesheet your style.css file that comes with your theme and that's a good place to put site-wide styles now before we can write our css rules we have to inspect the structure of the html code to make sure we target our rules properly so if we inspect here so we'll be targeting this link inside this menu item which is class menu button but it's also important to target these styles specifically to our menu to make sure we don't accidentally create buttons elsewhere on our site maybe if something had the same class so if you aren't certain that you've used a unique class here it's a good idea to target the wrapper class of your navigation and it's going to be different depending on what theme you use but i'm gonna show you how to find it so if you expand the structure of your menu and you can hover over any of these elements and it will sort of highlight it highlighted on the screen so it can see um what container you're currently selecting but for example if i go to this this is the outer wrapper of my menu and it's div id primary menu or class main nav so you may want to consider putting one of these selectors in front of all your rules that you're writing for the button just to make it more targeted and if you're going to use the id of your element you would put the hashtag and then primary menu that's how you select an id and if you're going to use the class so if i wanted to target it the class at main nav then we would put a period instead of a hashtag and then write our rules all right so first off we're going to create the ghost button style and again we're going to be targeting the a element the link element inside this list item that has the class of menu button so to show you how i would select it with the the menu id on my own site i would write a rule primary menu so we'll say primary menu which is containing the class menu button which is containing an a element or a link element and we can start writing our rules so for this example i'm going to use um a red border color for my ghost button so we're going to say border 3 pixels solid red and you can see it's been created now you might notice that the box is a little bit disproportional i think it's too tall and this may or may not happen on your site this is specific to my theme but if we just click on this element and sort of inspect on what's happening you can see that our button is 60 pixels tall but if you notice there's no padding on this element and what's actually happening is if we scroll down here um the theme is actually setting a line height of 60 pixels and so it's forcing the button to be 60 pixels tall so i want to undo that so i can control the sizing with padding myself so we're going to write a rule line height initial and that will just unset the line height so it will go back to sort of the default line height that is set by your browser now for the next rule i'm going to match the font color to the border color so we'll just say color red and that sets the text color and now we need to set some padding to make the button the size that we want so let's try padding and when writing padding rules you can set the top left right and bottom padding separately for example you go padding top 10 pixels and that would just affect the top but there's also a padding shorthand where you can set multiple padding values at once and the order that it goes is it goes top right bottom left if you set four values or if you only set two values it goes top and bottom side to side so we could do for example 10 pixels of padding on the top and bottom and 20 pixels of padding on the left and right so that looks pretty good to me and then we'll add a border radius just to make it a little bit of a rounded button so we'll say border radius 5 pixels and i want it to stick out a little bit um so i'm going to make the font size slightly bigger than the default so i'm going to make it font size 19 pixels so as you can see we have the basic structure of a ghost button or an outline button already set up but if you hover it you'll see that we don't actually have a very pleasing hover effect and i want to change this color so it looks a little bit more coordinated on hover so let's set a hover state so we're going to write another rule for the hover state of the button and we're going to use the same container selector that we used before and again it will depend on your theme and we're going to target the menu button class again and i'm going to target the hover state of this element so you put the colon hover after the a let's just try changing the font color to white on hover and we're going to change the background color to red to fill in the button when it's hovered and now if we hover it over it you can see it does that so i think that looks pretty good but there's no animation between the states so i tend to like a little bit of a animation transition between the states and it's super easy to add this with css and you can just write a rule transition and then we'll apply it to all the properties so anything that changes between the hover and non-hover states will be animated so we'll say all and we'll make the transition last uh a quarter of a second or 0.25 seconds and now if we hover over it there's just this slight animated transition all right that's it our button is completely done so let's move on to the solid button and i'm going to show you how you can add an icon or an emoji to your button as well so turning our ghost button or our outline button to a solid button is super easy i'm just going to delete this rule where you set the border i'm going to keep the line height rule i'm going to change the font color to white i'm going to add a background color of red to the button and now the initial state of the button is basically complete and next up we're going to adjust the hover state because right now the hover state is exactly the same as the base state of the button so instead maybe we want to add a couple different rules the first thing i'm going to do is slightly darken the background so you can see that it's being hovered so i've got a style that is slightly darker than red that we're just going to paste in here and this is a hex code color that you can just get from a color picker in your browser and now when you hover the button slightly darkens and we could also enlarge the button on hover so we could say for example transform scale the button and we're just gonna put in parentheses 1.04 which will make the button four percent bigger on hover and now if you go like that the whole thing enlarges and as you can see it's animating between the hover and non-hover state by using the transition property that we set already all right now let's talk about a couple tweaks you could make to level up your buttons one is you could add a gradient background to the button and maybe change the gradient on hover and the next is you could add some sort of icon or unicode character or emoji to the button just to make it a little more visually distinct and clickable so first let's add a background and for my rule i'm just going to use the same i'm going to combine the red that i was using for the background and the hover state the darker color and i'm going to combine them into one rule so i'm going to put in a linear gradient which basically goes in a straight line and it's angled at 120 degrees which is about like that sort of diagonally and you could rotate it so you could make it top to bottom of the button 180 degrees or left to right which would be 90 degrees but i'm going to keep it at 120 degrees and basically it just shifts gradually from the color red at the far left side to this darker color sort of down in the bottom right so we can put another rule and i'm just going to make the button red on hover but we actually have to use a linear gradient to do that so i'm going to make the gradient red to red and now on hover the button just becomes solid red so that's one option you can do and then to add an icon or an emoji there's a couple ways you could do it for example you could paste a unicode character directly inside the wordpress menu dashboard but i prefer to do it through a pseudo element so i get a bit more control over the sizing and the spacing of my icon so let's create a pseudo-element and to do that we're just going to go use our same selectors as before which for me is primary menu and then menu button which is the class i created and we're going to create a pseudo element and we're going to use the before elements and there's two types of pseudo elements just the before and the after and it doesn't actually matter which one you use but because but if by using a before element um if you don't apply any other rules it will appear to the left of your text here and if you use the after elements it will appear after your text here so depending on where you want the icon to be located you could easily use before or after and we're going to write our rule so to create the before elements you just set a content and you have to put this between quotes you can put anything in here you can put plain text or you could paste a unicode character but just to see so you can see how it appears i'm just going to put the number 99 and you can see it appears directly before our text so what you could do we're not going to choose this one but if you want the pointing emojis we'll just copy that and we could paste that as our content here and now we have a nice emoji hand to the left of our subscribe button and one other good option i like is to use unicode so maybe i'll grab a right arrow and let's see what looks good here let's go with this one and click to copy and i'll just paste that in the content here and now i have this right arrow now one thing that you may notice depending on the fonts that are on your theme is not every font especially some third-party fonts don't have support for all the emojis so it's a good idea to use a system font instead something like arial that will have built-in support for most unicode characters so i'm just going to change my font family for the pseudo-element to arial just to make sure that the unicode character does show up and like i said if you want to put it after the subscribe button you would just change the pseudo element to an after button and i'm going to show you how to put a little bit of spacing between these two as well so all we have to do is if it's on the right side you could say margin left and this is going to put some margin to the left of the pseudo element and we'll say maybe eight pixels and now you have some nice spacing between the two and to level this up even further we can maybe put an animation on the icon here so the first thing i want to do is delete the scale effect and instead we're gonna animate the icon on hover and to target this it's a little bit tricky but again we have the same wrapper elements we've got our menu class or our menu id the custom button class that we added and we'll be targeting the a the hover state of the a element and the ordering of these is important you have to make sure the hover pseudo class is before the after pseudo-element or the pseudo class so we're targeting the a colon hover calling after and what we're going to do is we're going to move it to the right a little bit and animate that so we're going to use the transform property and so we'll say transform colon translate x translate x which will move it in the left right direction and we're going to move it four pixels to the right and when i hover it doesn't do anything and that's because it's currently an inline element just like the menu item itself so we need to change it to display inline block and i want to put that rule in the a after selector not the hover state so it applies to both states and now when you hover you can see it moves and all we have to do to animate this is put that one simple rule transition all .25 seconds and now a nice smooth animation between both states of the button now we've just scratched the surface of what you can do with your buttons in your menu for example you could put anchor links and have them jump directly to sections in the page something i've covered in this video previously or you could use something like font awesome icons instead of unicode or emojis to even level up or add more design choices you could do that by adding an icon class directly to the button in the menu or by using pseudo-elements just as we did in this tutorial as well as my earlier gutenberg button tutorials now if you haven't already done so i'd love it if you would subscribe to this channel and join me on this journey where i'm going to show you how to build better websites and grow your audience for whatever it is that you're putting out into the world now if you're ready to keep learning now i've got a couple hand-picked videos for you right over there all right thanks

Channel: Build That Website

Views: 349

Keywords: wordpress tutorial, wordpress menu, menu button, button wordpress menu, wordpress buttons, button css, icon button, emoji button, pseudo-elements, wordpress custom css, wordpress menu button color, wordpress menu button css, how to add button in menu bar in wordpress, button in menu wordpress, wordpress menu button

Id: H2Lpc4GvolQ

Length: 15min 51sec (951 seconds)

Published: Thu Jun 10 2021