How to create a button in Adobe Dreamweaver CC.

Hi there, in this tutorial we're going to make this Red Button. We're going to do cool things where we borrow existing CSS from other Classes and we re-use some Classes, get more fancy. All right, let's go and do that now.

So first thing is, let's put in a Button. Now I want it to be just after this Horizontal Rule, so click on that. There's no Insert button. It's just the Hyperlink that we Style with some Paddings and Background colors that look like a button. The Button is this guy here. It's a lot like this one at the top here that we used for our Nav. So we're going to actually borrow CSS from that to save some time. So, Horizontal Rule, selected up here in my Live view. I'm going to go to 'Insert', 'Hyperlink'. It's going to say 'After'. And then I'm going to call this one 'Let's Talk'. Cool, linking, remember, we don't have the name for the page yet, so we're just going to use hash '#'. 'Target', I want it to be Self, so we'll leave it blank, puts itself as the default. And the Title, this is good for Search Engines. It sees this button, and 'Let's Talk' is not particularly useful to know what's happening, so we give it some more information.

We'll make sure it's keyword friendly. So this is going to be 'Daniel Walter Scott' because I'm going to be the UX/UI Designer that I'm trying to rank for, in Google. 'Contact Us'. Why is it all capitals? Because I left the Caps lock on. It should probably just be title case, but I'm okay with that. Nobody sees that in the background, but the Search Engines. Now we're going to go and Style it. And the cool thing about it is that, we, if you remember, made a Class called Red Button and Green Button. So we need to release that, so, we get to styles a-tag. This is where we get to start reusing things. And this is nice when you get to that point in the website and you're like, "Lot of the hard work's done, we get to start reusing things instead of always trying to create new Classes."

So now we get to go dot '.' and this one, remember, we called it ‘btn’ at the beginning, to make it easy to find. Button Red, cool. So it's got a red background. Now that Button Red didn’t come along with all the Padding. We did that separately, if you remember. So I want to steal the CSS from this button. Now, we can't do it here in Index Page because it's part of the Template, and it just doesn't let you. If I click on it, go to 'CSS Designer' panel - I'm going to turn all that off. - click on this, and it just doesn't really work. So we have to go open the 'Template'. And in here, I'm going to switch to 'Current'. Remember, Current allows me to click on something and it actually gives me the Classes that might be applied, and it happens to be this top one. I know, because if I click 'Show Set', it's going to show me the things that are applied to that particular Class, not everything. And we can see the Padding, the Text Color, and moving the Underline. So that's all the stuff we need.

There's a cool feature, we can right click this and say, 'Copy All Styles'. There is an option in here also that says just the Text Styles, just allow it depending on what you want, but I want All Styles. Thank you, Template. Now I'm going to apply it to this. Now I could go into here, and create another Class. And Style it with this. I'm going to be a little bit more resourceful, and use a Compound Selector. So what I'm going to say is, if there's a Red Button inside this Hero Box then apply this Text. So, maybe go from 'Current' to 'All'. 'Styles', 'Global', make a 'Selector'. It's picked bits of it. So, what do I want? You'll notice it hasn't put in the a-tag. It's just put in button-red, and hero-content, but not the a-tag. Let's just check if it works, sometimes they do, sometimes they don't.

So with it selected, I'm going to right click it, and say 'Paste Styles'. Hey, magic. So it is working. So now it's time to put some space between this Horizontal Rule because it's butted up next to it. So I would like you to go for the Pause button now. Hit 'Pause', and I want you to think of how you do it. You can go and try. Go "Okay, this is what I do," and see if you can give it a go. You can undo if it doesn't work. 'Edit', 'Undo'. And you can watch the rest of this video but come down here, wherever it is, 'Pause'. Pause is the button, and have a think. Go now. You're not pausing, are you?

What I would do, there's actually a couple of things you could do. We could do this Class here, put some Margin at the top. Or we could use this Horizontal Rule here. I'm remembering the Horizontal Rule mainly because I'm looking at it to go-- actually I want to do the space between there, and underneath. Instead of trying to do them separately I might as well just do the Horizontal Rule here. Go to 'Current'. There's my 'hr', I'm going to turn off 'Show Set'. So I see them all, and I'm going to go to 'Layout'. And I want to add-- I want to maybe minus the Margin off the top. I'm just clicking, holding, and dragging. And put a load at the bottom there. Either way would have worked, that Compound Class that we used, you could have created a new Class that did spacing, that be kind of weird, but it would work. But what I did was I did the Horizontal Rule to play with both sides.

All right, cool. Let's 'Save All' and get on to the next tutorial.