This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Class Project 04 - Custom Button COMPLETE

Daniel Walter Scott

Download Exercise Files Download Completed Files



We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.


I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link:


You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Video transcript

All right, how did it go? Did you do it, first of all, second of all, did it go well? Thumbs up. Did it go badly? Thumbs down, it's okay. We're going to work through how to do it now. Let's have a little look at VS code.
So what we're going to do is, we are going to remove My Button from all of these, and apply our own Class. So a cool little shortcut is, I've got my-- it doesn't really matter if you've got it selected, or just your cursor inside of something like a Class, can be inside anything, but if you want something further around down the page, you can hit 'Command D' on a Mac, 'Ctrl D' on a PC, and watch this, come on, D, D, grabs that one. Even if you want one down here again, D. Can you see, it just kind of jumps down to all versions of that, and that could be super handy. 

In our case, because they're stacked on top of each other, you could use multiple cursors, but D, D, D, okay, it's 'Ctrl D' on a PC, 'Command D' on a Mac. So this one's going to be called Nav Button. Nice. Down here I'm going to create our Nav Button. So put a full stop or a period. Nav Button. Curly braces, what do we need to do? Now there's kind of two ways you can do this, depending on how old-school the solution you found. There's like a new way and an old way. They're both perfectly as good as the next. 

So Border-style, and you set it to 'solid'. That's one half of it, and then you say 'border', Border weight, no Border size; is it size? Let's check, no, it is Border width, yeah, Border width. I'm going to set mine to 1 pixel. That should get us close, let's have a little look. It's going to look a bit weird, but here you go, that's the kind of basics in it. Now we need to add Padding to it, and all the rest of it, but let's just talk about the other way. 

So instead of doing that you can actually just type in border, Border, colon, 'border:', and then you can put it in an order. So it goes for the weight around the outside, the style. So I'm just using spaces between them all. I'm going to use white; do I need to write white? Can't remember, but that will do the exact same thing. That's just a shorter syntax than doing them separately, as Border weight, and-- sorry, Border size, Border style, Border color, I think by default it takes the color of the text inside of it, not 100%. 

So that's one way of doing it. We're going to add Padding, we're going to use our fancy Padding. Did you use the fancy Padding, or the Padding top, Padding left, Padding right? Doesn't matter, you get to the same place, but remember, like margins, you start at the top, so I want the top to be 11 pixels, space, then we're going to use the right, and I'm going to do 25 pixels, and if I leave it just as 2, remember, that will end up being top and bottom, there'll be left and right. Save it, let's have a little look; cool. 

I want it to be Playfair, so Font style, no, not size, style, and I want it-- oh, come on, Dan, Font family. I pretend like it's a test. Actually just get to steal it. There you go, you probably did that as well, I bet you did. There you go, because I always forget like, is it two words, is it one word, anyway. Save that, let's have a little look. I think we've done it all, it's an A-tag. Let's have a little look at our list. It is an A-tag, we've created our own class called Nav Button. We've got a white border around the outside, it's Playfair. It's white, there's no underline, and there's no background color. 

Now the text is white and underlined, might depend on how you've implemented your site. Yours was purple and it was underlined, or blue and underlined. It's because-- mine's not because earlier on in the course I took care of it, remember I said, let's just add an A-tag, and all A-tags on our whole website are white, and have no underline. Text Decoration:none, if you haven't done that, you'd have to add it in here, but hopefully that worked for you. And if that still didn't work, and still bl-- I'm just thinking, if it's still underlined and blue, you might, well, you have to do this, you'd have to go an A-tag, that is joined to the Nav Button, and style it to be white, you know, color, white, and I'll do it the whole thing. 

You just go, we've gone this far, Text Decoration, and, what is it? Text Decoration, none. I'm blaming some of my spelling on-- I can't see my keyboard. When you're video-ing these courses, well you're not, I am, there's a big microphone right in front of my face. So you can hear me in my great sound, because if I'm too far away you hear me over here, and it's not as cool. So I got to sit nice and close, which means it's right in front of my keyboard. So I'm either looking around it, like this, or I just can't see what I'm typing, and I'm not a good enough typer to not be able to see, anyway. 

Now I do find that later on in these courses I get, well, I get video bazillion, right? And I feel like we've crossed past the dentist, to be a super professional in the beginning, and we're into the sharing too much. So you can say, sharing too much, Dan, and I'll straighten it up for a little while, at least. And we're talking about families, and my problems with my mic. Let's jump in now and get on to the next video, before I go off on another tangent. Bye now.