Button Styling Practice

[00:00:00]
>> All right, so, we need to style our buttons, so let's come up with a style here for these buttons. I'm gonna go to my tour layer here and I'm gonna start with .button-primary, okay? All right, so this is the way the buttons are gonna look, like this, all right?

[00:00:26]
Right now, they don't look like that, what would be your suggestions? And I'll zoom in, and button-primary are these ones here that say Buy Tickets. So, what would be your suggestions for styling this button?
>> Border.
>> Maybe a border is a good place to start, what else?

[00:00:49]
>> Color.
>> We have a border, a color, what else?
>> Border radius.
>> A border radius, what else?
>> Background: none.
>> Background: none, yeah, what else?
>> Some padding.
>> Some padding, what else?
>> Uppercase letters.
>> Uppercase letters, what else?
>> Rounding the radius of the square so it's not so sharp on the edge.

[00:01:11]
>> Yeah, border radius, yeah, what else?
>> Hover state?
>> Moving out to the side.
>> I'm sorry.
>> Moving them over to the side.
>> We definitely have to do a layout thing. We're not gonna worry about that part just yet, it's coming, what else?
>> Center the text.

[00:01:27]
>> Center the text in the button. Nobody has said the font.
>> Ah-ah.
>> Ah-ah, the font is Serif now, isn't it, okay? So, the font, we can actually change this on the body, and the reason we gonna do that is because previously we had only one font family, everything was Sans-serif.

[00:01:47]
Now, predominantly in our design, you'll just have to take my word for it, it is a Serif font. So I am gonna change this to Serif as my base body family, and that will change everything immediately, okay, even our buttons and all the rest of it. Okay, so it sounds like you guys had a pretty good idea of how to style this button.

[00:02:10]
So I am gonna give you five minutes to style just this button, the Buy Tickets button, and you heard all the things that need to change over what you have. So let's take five minutes and write a style for that button, go. All right, how'd you do with those buttons, good?

[00:02:35]
All right, tell me how to style them. We can just sorta go through here, and everybody tell me one property that I ought to add to this button. So we'll start over here with you, Kelsey, tell me something I should do.
>> text-transform: uppercase.
>> text-transform: uppercase. Okay, good start, Andrew, what you got?

[00:03:01]
>> border: 2px solid: magenta.
>> var(--magenta), okay? 2px solid, var(--magenta), nice. Patrick, what you got?
>> padding: 1rem 2rem.
>> 1rem 2rem, okay, nice, looks good. Jason, what you got?
>> Set your color to magenta.
>> color: var(--magenta). Nice, Michael, what you got?
>> I did a border radius of 10 pixels.

[00:03:42]
>> border-radius: 10px, sweet. By the way, why pixels on border-radius? Because, I mean, does it need to respond? Probably not, you probably want the same amount of rounding no matter where you are. So pixels are just fine. Siya, what you got?
>> I just switched text-alignment: center, but it looks kinda centered to me, [LAUGH].

[00:04:05]
>> Okay, text-align: center, there's no problem, assuring that that in fact happens. Anything else?
>> text-decoration: none for the Buy Tickets.
>> text-decoration: none, that's a good addition. Okay, so there we go, looking good? All right, let's see if I have anything else. I had a just a couple of other things.

[00:04:35]
Let's see, I had a font weight of 600, just to make them bold. Did that actually do anything? 700, 600, Did that do anything? Yeah, that did something, okay. So I made the text bold for whatever reason. And let's see, uppercase, I did a display, display: inline-block. And that is so that we can put potentially a little bit of margin on it, and maybe that comes later.

[00:05:21]
The other thing that I added here that you might be interested in doing is a white-space of nowrap. Anyone have any idea what that is, white-space of nowrap? Okay, so the idea here is that if we have long text and we start squashing this together, see how this is not going to wrap.

[00:05:45]
If we don't have that in place, Then the buttons will wrap, see that? [SOUND] So if you don't want the words to wrap, then you add that, white-space: nowrap. Cool, and they are different widths here on the page is the other thing. Eventually this will matter, doesn't matter right now, but when we put them in this column, you probably want them to be the same width.

[00:06:20]
So, you can set a width there so that they're all wind up being that same width, and for whatever reason I said 170 pixels. Okay, good, so now, we have a whole bunch of buttons that are exactly the same width. Well done, everybody, yay, [APPLAUSE] good job, good job, good job.