In this WordPress Video Tutorial for beginners, learn step by step how to add buttons in WordPress, using the Maxbuttons Plugin. It is a free plugin that allows us to add customized buttons, by changing their design, color, and functionality.

[box]Video Title: How to Add Buttons in WordPress
Video URL: https://www.youtube.com/watch?v=Tg1P-uxbJdM
Accompanying Course: Beginner’s Guide to WordPress – Web Design Course[/box]

< Go Back to Video Tutorials List

Transcript: 

So in this lesson, we’ll going to be looking at how to add buttons specifically in WordPress although this seemed very translatable if you’re using another content management system. So the resources that would be looking at is, well, there three different types of buttons that ultimately we can create. We can just create a simple image that’s the button we can create something that has more other a fact-based that’s in CSS and we can have something that mixes the two together by using a plug-in. And so in my opinion, the best image-based and these are all button creators. So you have actually have it in your face that you look at to create these buttons and you can move things around and the things like that you don’t have to know rock code is that the button factory is to create actual images. I’ll show you very briefly about that. CSS button creator, that’s obviously getting the CSS code for this and the max buttons plugin.

Alright, so the first thing that we can be looking at is actually the button factory and it’s DA then button factor dot com and so the way this is works is, it’s very simple. All it is you can imagine these buttons are just going to be images that we’re going to download and upload onto our WordPress website, just like we would any other image. And we’re going to embed it on a website just like we would any other image. But now, it looks like an actually button, so that’s how this works. Some people like it, some people don’t it, entirely depends on you. Just very simply, you could change anything that you want and now be a live editor, so change based on that the things that you want and you can change different fonts, you can change the colors. Things like that.

You can upload the type of image you want, you want to in PNG, things like that. CSS code, image thing, whatever you really want, so it’s quite robust as a lot of power to so you can change many different things. The gradient, the top color, the bond color any different types that the effect that they may have, the only thing though is this if it’s an image when you hover over something. It can be much more difficult to have that effect that you normally would with other button that you usually be making at about that, those are all generated to CSS code. In that situation where you, one you can use the CSS code.

Another one, I’m going to be talking about is a CSS button generator until all these codes are all these up websites are free, so that’s one thing that’s very good but same thing with this. This is a CSS button creator and you can just change many, many different things. You can change the button, you can change whatever the CSS name you want it to be, so it all up done for you, say everything is very, very simple. You can make different types of fonts on same thing, borders in sizing, you can make it much more rounded, and you can make much bigger font, things like that. Shadows tech shadows, all you know when to really show you here is when actually get the code. What you going to do is, you going to copy and paste all the CSS code if you use the CSS editor in WordPress or CSS plug-in in WordPress. You can just pasted in there or you just enter in at the very bottom of your styles dot CSS and make sure you can copy and paste this HTML code wherever you want the button to actually show up.

The only that you want to be mention is this; it is just a general for any type of CSS code that you add. Always remember this. One thing that I want to show you is this class name. This is just very general for any type of CSS code that you add is that just be very weary of this class, right? So when I change the cost name here and edit for us here at right at the top and anytime for example any defects that has cost name to hover, cost unto active things like that, right?

So just be aware that that is the identifier. If you have multiple CSS code, that’s how it identifies where is this some specific code belong to, right. The class is costing too and that’s why we named it right here. Just be aware that, just anytime when you use CSS code a lot of people on bill change this but forget to change some of these ones and no wonder why, for example why does my button doesn’t show up the right way, why does my image and effect that I wanted doesn’t mash up the right way, right? So these are actual button creators that I use on external websites. In my opinion, they’re great right, but the only thing is they’re not that simple. They’re perfectly fine but not that hard to use as well but they could be even easier, right? And the way that I want to do that is with the plugin.
04:44
The plug-in that we’re going to be using is this max button, WordPress button generator and has many many downloads 200,000 downloads, 4.6 stars. It’s a very good plug-in, right? So what we’re going to do is this, we’re going to install a plug-in like we would a normal plugin add on to the directory or just in the search and what we going to do is, this is a free plugin by the way, you just going to add a new button. So, I missed how to show you how to make a very basic button and you can design however you wanted to design it. There’s so many different functionalities and made different options that you can change but let’s say, so this button, let’s just say we call it the green button because that was the original, that’s what the color going to be. If you want to put a description, well just put something. It doesn’t really matter.

The URL, when the link is clicked, let’s say we wanted to go to a certain website and actual text that she wanted to go now. Now it doesn’t really matter whatever you want, open in new window, and don’t open in a window. So you can see there’s a lot of a different option that makes a lot easier. You don’t know any code, oh what fun too and I say you want Times New Roman, actually I don’t really like Times New Roman enough for website of each. Let’s say, we wanted a little bit bigger and see and everything is changed as we go we can change the style we want italic or normal. Let’s say it we want Italic, we want bolded words, a shadow offset. The thing with this is that, I may not know what shadow offset laughter top may mean but we can just change it, we can change it is just to see what happens when we do changes, right?
06:22
And in my opinion, there’s not much of a difference, so we’ll just leave it the way it is. To me, it looks perfectly fine. You can change how much [inaudible 06:33] you want on the top on the bottom things like that. For me, I may like smaller buttons, you may like bigger buttons, doesn’t really matter. The radius just makes some of curve, things like that. Let’s try to make it much more occurred just see you guys can tell what it will look like, like if you want to be the top that way and the bottom a whole different thing, that’s perfectly fine and you can change because you know there’s a lot of different things that you can change. What is actually showing you is, this start color so what it is when you start and– well what it is, let me just take a step back what it is when you just look at the button and when you hover it, that’s the color blue that is at the end.

And the screen is just that come to start color and the ending is more on the sides are on the outside right, so there’s many different options. I don’t really want to go to all of them but we’re just going to save the button, right. So now what we’re going to do is, if we actually want to utilize this button, how you’re going to do that and so let me make one, edit really quickly. So now, we see what the shadow does, the shadow offsets the words and so we see how that will all work out. So what we going to do is, we’re just going to open up a new post. I was going to open up a new post and one of post that we have made previously and what we’re going to do is we’re just going to try to embedded in it; see what everything looks like, right.

So what I’m going to do is, we’re just going to open up one of these posts that we edited previously and we’re just going to edit it and everything is done through short codes. So it’s very simple, just to copy and paste button and we’re just going to have to find what the short code is, so we can add the button into our website and if you want to add it that side by that’s perfectly fine in the widget that would be just as fine. As you can see, the add button is right here, so it’s very easy– you just click it and just select which button to get . And if you have on more button, then it’s like those different ones but you can see this how it looks when it’s just on its own, that’s what it looks like when you hover cover it that’s what it looks like. So just insert the button.

As you can see, the short code is very simple; it’s just the ID number. Now so we update that or just see what it looks like and you can just play around with it, you can make different color buttons, make different styles, make them centered, whatever you want to do with it.