This is Sasha and welcome to another CSS training video where I share with you how to edit and modify your website within the CSS. If you have an online business, this is fantastic and great for you to get started or if you’re looking to brush up on some CSS code, then this is the training video to watch.
In either case, today, what we’re going to do is take a look at how to create some nice CSS buttons, and I’ll show you some different ways to play around with those. Let’s take a quick look.
The button that we’re looking to create is going to look somewhat similar to this. If you can see, we have like a nice primary roll over and when you push it down, it kind of goes down by 1 pixel or 2. Anyways, that’s kind of what we’re going to look for or somewhat similar to a button.
I’m going to show you how to do this and in either case the code on the HTML merely is just A, and then we put a class famous button, href, we pointed it to somewhere so you could go to, you know, your website.com or Google and then your text and closing of that anchor tag.
Either case, let’s start from scratch, and I’m going to show you how to build this. First off, when you have the great button, you need a class, we’re going to call it famous button right there, and as you can see that now that I started working on it right away, that button is gone.
In either case, we have a famous button right there and what I’m going to do is when you have this great button, let’s start with coding some basic things. I’m going to make this one maybe like a blue button. We’ll make it kind of like yellow and blue. Let’s do yellow so you can see as a yellow version.
We’ll go ahead, and I’ll do something like this, we’ll start with – I always like to do kind of like a background color first so we can kind of start right there. We can say text decoration none, okay? The other thing is the font family. We can do Arial, okay? That gives us a nice font.
We can do the font size. Let’s make it about 40 pixels just so that it’s nice and big. We’ll also make the color probably something a little bit darker than – a yellow tone but a darker yellow tone, okay? We’ll do – we’ll put something like this. I could do something a little more, let’s say, brownish as well because yellow and brown, they work well.
You can see right now how it’s working out pretty well. The other thing I want to do is, let’s say, font weight, I’ll do maybe 600, we’ll see how that looks. Font, I’ll go ahead and use Gotham just because I know that in that font family there’s a lot of different sizes when it comes to buttons because I could do – font weight I mean. I could do like a 300, I would like a 600, so there’s a lot of font weights.
--------------------- HTML CODE ------------------ Join Our Email List! --------------------- CSS CODE ------------------ .famousbtn { background: #ffe875; text-decoration: none; font-weight: 600; font-family: gotham; font-size: 40px; color: #6d5731; }
Okay, so far we’re progressing pretty good. I need to add some padding because it’s just too close to the edges so padding, let’s just say, I’ll do maybe 25 around just to get me started and, let’s just say margin-top 25 as well just so I can see that button going and let me just take a look here.
If I just add that actually to the body, let’s do margin 50 pixels, that way we have a little bit of room to work with. That way I don’t need that margin right there. Anyway, I have padding 25, let’s do border-radius, let’s go about – let’s start with 45 pixels and see here how that looks.
Okay, it looks pretty good, I probably actually want do 65. You can see it rounds it a little bit better maybe even, let’s do, 85 so we have kind of like that pill button. With the padding, the 25 is good. What I probably want to do is just 20 pixels on top and bottom and more like 60 pixels on left and right and let’s reduce that font size a little bit, so it fits on there.
There we go, that creating a nice button right there. I might even go ahead and add like a 1 pixel or 2-pixel border, and I’m going to use since our background is this color, okay? Let me see if I can pull that color. Do I want to make it just a fair bit darker, okay?
I’ll go ahead and make it this color. You could see, there we go. That’s creating like a nice border. I could even go maybe 3 pixels. There we go. You can see that’s starting to take shape.
--------------------- HTML CODE ------------------ Join Our Email List! --------------------- CSS CODE ------------------ body {margin: 50px;} .famousbtn { background: #ffe875; text-decoration: none; font-weight: 600; font-family: gotham; font-size: 30px; color: #6d5731; padding: 20px 60px; border-radius: 85px; border: 2px solid #e8d266; }
Then what I want to do is go ahead and put something on them – as the rollover, okay? As we roll over, so this will be our hover state, I’ll go ahead and do this. What do I want to do? Well, let’s say I’ll change color to maybe orange, okay, so some orange color tone.
Let me zoom out of here so that way we can see all the different color. I’ll go ahead right here. We’ll change this to background right there, something to this color. Let’s see how that starting to look.
As you can see, my text is stating the same. I’ll need to change the color of that text, and we’ll go to white, okay? As I roll over, you can see how that’s starting look. It looks pretty good. I don’t need probably that border, border 0 or none, okay, and let’s take a look, see?
As we roll over, there’s no border right there. I could add one if I wanted to and, let’s say, we make it a little darker. Border, we’ll do the same size, 3 pixels solid but a different color. You can see, there we go, that’s coming along pretty well.
--------------------- HTML CODE ------------------ Join Our Email List! --------------------- CSS CODE ------------------ body {margin: 50px;} .famousbtn { background: #ffe875; text-decoration: none; font-weight: 600; font-family: gotham; font-size: 30px; color: #6d5731; padding: 20px 60px; border-radius: 85px; border: 2px solid #e8d266; } .famousbtn:hover { background: #ff6f1c; color: #fff; border: 3px solid #db5b11; }
The other thing that I could do it, let’s say, on actual meaning as we press it down we can have that button move. I’ll go ahead and create this next little bit right here, and we’ll do on active and – okay, so what I want to do is probably go ahead and put this back, but I’ll do position relative.
Let me see because it’s relative to the past. Let’s see if that helps and works out. We’ll go to 2 pixels and let’s see here. All right, so there we go. That works a lot better because if I do 5, there we go. That’s working a lot better.
--------------------- HTML CODE ------------------ Join Our Email List! --------------------- CSS CODE ------------------ body {margin: 50px;} .famousbtn { background: #ffe875; text-decoration: none; font-weight: 600; font-family: gotham; font-size: 30px; color: #6d5731; padding: 20px 60px; border-radius: 85px; border: 2px solid #e8d266; } .famousbtn:hover { background: #ff6f1c; color: #fff; border: 3px solid #db5b11; } .famousbtn:active { position: relative; top: 3px; }
We’ll go 3 pixels there on the active state as I press down, that button goes down just a little bit, okay? This is looking good. The other thing that I could do is you can see these transitions very quickly. What I could do is I could do kind of a transition, and then all, I’ll do 0.5 – let’s do 2 seconds ease.
Let’s see what that looks like. As you can see as I roll over, it makes it fades into it. If I want it a little quicker, I’ll do 1 second. Let’s see how that looks. It’s a little bit smarter. Maybe even faster would be better. Let’s do 300 milliseconds and let’s see what that looks like. There we go. That a little bit better even 600 or 700 milliseconds. There we go. That’s a nice little transition.
--------------------- HTML CODE ------------------ Join Our Email List! --------------------- CSS CODE ------------------ body {margin: 50px;} .famousbtn { background: #ffe875; text-decoration: none; font-weight: 600; font-family: gotham; font-size: 30px; color: #6d5731; padding: 20px 60px; border-radius: 85px; border: 2px solid #e8d266; transition: all 700ms ease; } .famousbtn:hover { background: #ff6f1c; color: #fff; border: 3px solid #db5b11; } .famousbtn:active { position: relative; top: 3px; }
You can see how that’s working with the button. If you wanted to get a little more complicated with it, of course, you could do a little bit of a gradient with it, so that’s another option. If I wanted to get rid of the border-radius, I could go ahead and get rid of that.
You can see it’s like a nice flat button that’s a little bit more squarish. That’s another way of doing it and creating a nice CSS button and then when you press it, you get a little bit of that effect, and I could quickly change these colors if I wanted it kind of like a blue color tone right here. I could go ahead and change the background to blue. I could also change the color of the text to white, and you can see how that now is kind of like a bluer color. If I wanted it more like a purple color, I could do that as well.
--------------------- HTML CODE ------------------ Join Our Email List! --------------------- CSS CODE ------------------ body {margin: 50px;} .famousbtn { background: #6935a5; text-decoration: none; font-weight: 600; font-family: gotham; font-size: 30px; color: #fff; padding: 20px 60px; border-radius: 85px; border: 2px solid #3a3a3a; transition: all 700ms ease; } .famousbtn:hover { background: #ff6f1c; color: #fff; border: 3px solid #db5b11; } .famousbtn:active { position: relative; top: 3px; }
That’s just playing with some colors, and then I’ll go ahead and change that border as well and let’s take a look at what that looks like so you could see very nice simple buttons, you know, that you can use in all sorts of ways. Let’s see, there we go. As you can see, there you go. That’s your CSS button with a nice rollover effect and even as you press down a little active state.
