Buttons

Quick reference

• 00:05 In this video I wanna talk about form buttons.
• 00:07 Anytime you have any kind of fill out form, contact form, any kind of form, you
• 00:11 have a button at the bottom that a person clicks on in order to submit the form.
• 00:15 So to do that the old fashion way we create a form tag, and inside of
• 00:19 that we input type, submit, with a value type of whatever you want for your value.
• 00:24 And that just creates this basic boring button.
• 00:27 But with CSS we can change how these buttons look and
• 00:30 it's actually pretty easy and that's what we're gonna talk about in this video.
• 00:33 So to create an actual CSS button we come back here.
• 00:37 And let's create a button class.
• 00:39 And we need to designate a whole bunch of stuff.
• 00:41 So let's go background color and let's call this blue.
• 00:49 Now we want border, none.
• 00:52 Or you can put border if you want.
• 00:53 Color for the text let's go white.
• 00:55 Padding let's go 20 pixels.
• 01:01 We want text align for the text, let's put the text in the center of the button.
• 01:06 We want no text decoration so we want none.
• 01:11 There's a whole bunch of stuff we gotta put in here.
• 01:13 Display we want to give it our old inline block.
• 01:18 Talked about that in an earlier video.
• 01:20 And font size, Let's go what, 20 pixels, sound good?
• 01:25 Margin, I don't know, five pixels.
• 01:29 And for cursor, we haven't actually seen this one yet.
• 01:31 We can change how the mouse cursor looks.
• 01:35 We save this, head on over to our index, give this a line break.
• 01:39 Now to call this we can do it a bunch of different ways.
• 01:43 First we can give this a link, I'm just gonna make a fake link here.
• 01:47 And I call this button, but inside the link tag we can give it a class of button.
• 01:56 So if we save this and hit reload we see this gray button.
• 02:00 Now when I hover over it we're getting all this other styling,
• 02:03 because back in an earlier video, we did all this A stuff.
• 02:06 So, we're getting this A styling because, in our index page, we called it as an A.
• 02:12 So, just keep that in mind.
• 02:14 But, you can see it's clickable.
• 02:15 And, see here's our cursor.
• 02:17 But if we hover over, the mouse changes to a pointer cuz we changed the cursor so
• 02:22 that's kind of cool.
• 02:22 Another way we can do this is we can come up here to our button and
• 02:26 give this a class equals button.
• 02:28 And if we save that and hit reload boom it changes completely,
• 02:34 because we gave this a background color blue with white text.
• 02:38 So this is blue with white text.
• 02:39 The reason why this is gray and green is like I said earlier,
• 02:42 we have all these A stuff.
• 02:44 So if we get rid of, actually, let's just comment this out.
• 02:49 This is another good example of how and why to comment things, there we go.
• 02:56 Now if we save this and come back and hit reload,
• 02:58 this one down here will change to the other one.
• 03:00 So two ways to do buttons, either just by creating a link and
• 03:05 doing a button like that.
• 03:06 And like I said, when you create a link button like this,
• 03:09 all of your link CSS properties will flow through here.
• 03:13 So keep that in mind.
• 03:14 And that's a great way to be able to style these buttons.
• 03:15 Another way is to just use the old submit and give it a class equal that button.
• 03:20 Either way they both work.
• 03:21 They don't actually go anywhere cuz these buttons aren't connected to anything.
• 03:24 But that's buttons, very cool.
• 03:26 And that's all for this video.

Lesson notes are only available for subscribers.