Hi there, we're going to make a button, not an ugly old button like this one, a good looking button like this. Ignore the top padding, we'll fix that in the next video, but we've got a button, it's clickable, and it's got a nice background. Let's jump in and work out how to do it. Spoiler alert, it's just an A-tag with some padding, but let's do it together anyway. 

To make our button, what you might be really inclined to do, is figure out where we're going to put it. I want to put it just after this P-tag here. So there it is there, Hero Box1, here's my P-tag. So just afterwards I'm going to put in, what sounds sensible, there's a button. I'm going to click here. Let's 'Save', I'm going to preview it, and we get that thing, that is the kind of form button, and it's not what we want here, because we want it to look like a mock-up over here, and it's just too hard to do, using that button. 

You can format it quite a bit to make it look like this, but it's easier just starting with an A-tag, to give it some Padding and Background color. So we're not going to use button. Let's go and click button, goodbye, button. All we want is an A-tag. We've used that loads of times; where is it going to go? Let's actually get it to go somewhere. I'm sure you're sick of like just putting in hash, so let's make a 'File', 'New Page'. I'm going to save this one, this is going to be called my Test Page. You can link to it from our links now. 

Remember, this could be .html, I'm going to put in an H1 saying, you be, we made it, new page. I'm going to close it down. So I made it, closed it, and I'm going to link to it now. So what do we call it? Test Page. So it's actually going somewhere. What is this button going to do? It's meant to go to our Book Online, so in between the A-tags, we're going to say 'Book Online'. Do I want it upper case? No. So we're using title case, and that's what it looks like in the browser. You're like, "How is that much better than the actual ugly button?" It's easy to style this one. 

Let's go and do those basics, it depends on whether you went and-- remember, earlier on we styled our A-tag potentially in the Head or in the CSS, and we called it the CSS Reset. That would have been handy, but I didn't, so I'm going to say, actually I'm not going to be really specific, I'm going to be quite broad. I'm going to say, all A-tags up here-- Why is it at the top? Because I feel like it's a really broad stroke, so it should be at the top. I'm going to say, all A-tags now need to have a color of white. This is probably going to come back and bite us in the bum. Always seems to happen when I do freestyle like this.

Color, and we're going to say, the Text Decoration is set to 'none'. So that's going to get us started, hopefully, there you go. Nothing's really going on. Let's give it a background color, and color the text. So in here we're going to, well actually what we might do is we'll start creating our own Class, because I'm going to-- we're not going to style all A-tags to be buttons, right? So what I'm going to do is, just after the quotation marks here, I'm going to give it a Class name of 'My Button'. Over here I'm going to say, My Button does a few things. That is totally useless now, right? Can we get rid of it? We can, because I said, all A-tags be white with no Text Decoration. 

Let's have a quick little check and make sure we haven't wrecked anything. Yep, perfect. So My Button needs a period in front of it, and we are going to say to this button, I want a background color. Background color of, I'm going to use white. It's going to kind of wreck it, right? Make sure it's semicolon at the end, make sure you save it all, there you go. Kind of wrecked, right? If you can't see anything, it's either haven't saved at all, or there's no text in your button. If you've just left this off thinking you'll come back to that later on, because it can't be seen or there's no things to wrap around, it needs some sort of text in the A-tag. 

The other thing, it might be, depending on where you're watching this, we'll not actually deal with it in the next video, but if yours still won't appear, and you're kind of stuck there, you might have to do a Display:Inline-block or Display:block. We're going to talk about this in the next one, but, that might be causing you problems as well. So do that, that might fix yours. Ours is working fine, the problem with ours is the Text color is white as well. So we're going to do Text color of, we'll use this top one here, from our Gradient, and that's the cool thing about VS code, is it looks through your CSS and says, "Hey, you've used these before, want to use them again? You might be, "Yep." Save me some time, let's have a little look.

I would also like to make it to be Playfair. So Font family, we want Family, we're going to be Playfair. Actually I can't remember all the syntax for it. So I'm going to go steal it. I'm going to use this search function, which is 'Command F' on a Mac, or 'Ctrl F' on a PC, and I'm going to type in 'play', lots of play, there it is, Playfair. The reason I can't remember, like I could probably guess Playfair, but I can never remember if it's in two words or one word, and remember, if it's in two words it gets these quotations around it. If the font you're using doesn't have two words, it won't have those quotes around it. So I'm just going to grab you. Let's have a look now. 

It's looking nice, let's add some Padding around it. So we'll do Padding. Now we're going to do our shortcut stuff. So we're going to use regular old Padding, and we're going to do the top and the bottom. I think we've covered this before, right? So if you put in all four it goes, Top, and we're using 11 and 25 pixels for the top, 25 for the right. So it goes clockwise starting at the top. We can go all the way around, but because it's really common to have the same X and Y-axis, so the tops and the bottoms are the same and the left and the rights the same, you don't need to write all of the extra repeat that's in there. It will assume if there's two, you mean x and y for the first one, sorry, up and down for the first one, and left and right for the second one; that should work. Here we go. 

Now we need a little bit of margin above it, but this is not going to work, and we'll talk about it more in the next video. So Margin-top is going to have 10 pixels. I know you're going to try it, and it's not going to work. Drove me made as well when I first, when I was working, what that did. So don't worry about that for the moment, we're going to come back to him. There's something to do with Display:Inline-block goodness. Actually I'm going to separate it for another video, but if you just want to fix it, add the margin and just type in display, because I know everyone's going to go on to the next video.

So Display, go Inline-block. If you set that, and now do the margin, it will work, but we'll talk about it in more detail in the next video. So we've got Padding, we've got you, we've got that. That's all we're going to do for this one, because we've got a button, you click it, and it works, because, yippy new page. Oh, disappeared, weird. So yes, what are we going to do? That's it for this one, you could just add some margin to the bottom of the P-tag, but it won't work to the top. We're going to talk about Inline and Block Elements in the next video, to kind of actually know what we were doing when we're typing in display:inline-block. Let's do it in the next video.