Styling Interactive Buttons

[00:00:00]
>> To style the primary and secondary buttons, I'm going to give them a modifier, right, we talked about modifiers with block element modifier. Let's go ahead and actually use them in practice, so button, we want this to be button primary, and this will be button secondary. So this will allow us to have some similar styling with the button class and then customize it based on the modifier here.

[00:00:27]
I'm also going to create a couple more variables in our base file that will allow us to be consistent. So I'm going to declare color, we'll call it button, primary background, and we'll give this the color text on primary, we'll set it to that. And this is relating again, back to here we can see we have a white background with orange text, so that's our first variable.

[00:00:54]
The second one is going to be color, it's going to be for the button, it's going to be the primary text, and this is going to be a Color primary. It's a little bit verbose here, but just bear with me. Now we can actually use these, so if I go back to our button code for our primary one, let's use those primary.

[00:01:16]
So I wanna set background color to our primary background variable we just defined. Button primary background, same for color, bar, color, button, primary, text. So there is something going wrong here, let's figure out what's going wrong, maybe I set the wrong values. Our button primary, I set to orange, I set it to our primary value, not our primary text value, we want to swap those, right.

[00:01:50]
Real-time debugging, let's go fix that, so we want this one to be color primary, not color text on primary, color primary. I'm sorry this is supposed to be white, I get myself all confused white background orange text color text on white. Okay, now we're really going into bug together, what am I doing wrong here?

[00:02:27]
You know what, look at this, I have to find bar twice this is what's going wrong I believe let's find out. Me and my typos, let's see is this, this is a moment of truth here. Look at that, silly, we'll do the same thing with the secondary button right we're going to set the background color and the font color.

[00:02:53]
In this case we have a border, we either have an orange background or no background depending on how you're looking at this and then white text. So just to make sure I don't have typos, we're gonna do the same thing, copy and pasting, except I'm changing the primary to secondary here.

[00:03:12]
Secondary now the question is, can I type that without misspelling it? So we've got secondary for both of these our background color, instead of white, we want it to be the primary color, so we want it to be that orange, right. So color, primary, like that and we want our text to be color, text on primary, like that.

[00:03:39]
I'm gonna copy and paste this for the secondary button, as well make sure I'm not miss typing anything secondary. And instead of color button primary background it'd be secondary, also be secondary. No typos there that's what copy and pasting does, okay, colors are working that looks nice. We do need to align the buttons they're looking a little bit misaligned here.

[00:04:10]
So to do that, I'm going to create a little wrapper around these buttons, since a little easier to position them. I'm gonna call it div and I will give it a class of button container. Button-container, right, okay, I now have a wrapping container that's gonna help us align these buttons in a nice way.

[00:04:35]
I've already started writing this in the base file, I'm just gonna continue in here. But I guess this is really specific to the homepage, so you might wanna think about moving that out if you were to do this on your own. So in our button container we're laying things out in one dimension right, we want to align things in one dimension.

[00:04:53]
So that's a great use case for Flexbox so I'm going to set the display property of flex on our container, and look at that. They're lined up, right, but we want them to have a little bit of space. So this is where our pseudo-selectors are going to come into play or pseudo-classes, right, so we want to give some space between the buttons, right?

[00:05:15]
But I don't want this second button is the last element in the container, I don't want that to have a margin end because it doesn't need it, there's nothing to the right of it. So, how do we target that? I want all buttons to have, margin in line end 20 pixels, right, so regardless of text direction It's right to left, left to right.

[00:05:41]
Margin-inline-end is the right one here, not margin-right. However, like I just mentioned, I don't want the last one to have this, because if we go in here, does it visually make a difference? Not right now because there's nothing to the right of it, but let's say we added I don't know something else to the right of it we might not want that margin there.

[00:06:02]
So to get rid of that we'll target all elements with a class of button, but not this is where that not comes into play, the last of type. We don't want that last button to have this margin. So you can see it, it's no longer there, we've excluded that.

[00:06:28]
Okay, last thing with these buttons, we need to center this icon, in order to do that, I'll just give it a class so it's easy to target. Give it class button, icon, we'll call you, and the last thing we want to do Well, we didn't learn about this property, but there is a way to center things vertically, and it's called vertical align.

[00:06:59]
And we want that to be vertically aligned in the middle, so we can see now that icon is centered vertically, right. If we take it away, it's not centered, vertical align will do that for us. Sometimes you'll see Flexbox used within button elements, I like to try and avoid that, it does work.

[00:07:20]
But if you can use vertical align, I would recommend doing that. Last thing I'm going to give the button container some top margin, because right now it's sitting right up against that subheading. So let's fix that, let's do that here and the button container will give it a margin, margin top.

[00:07:39]
We'll give it 100 pixels. Now it's got some space, there's one other thing I want to try here on our button I'm gonna give it a box-sizing a border box. Just remember we wanted it to have a width of a hundred, or, I'm sorry, a height of a hundred.

[00:08:06]
Where did you go, where's my box sizing? Here we go, box sizing, border box. And this instance is not gonna change it because, again, we've set the width and height, but we did not have a border defined on this. We do have a border to find on this, box sizing border box, well, it's not looking like it's doing very much, does it?

[00:08:35]
Width of 206,92, it does look like it's subtracting out the top and bottom border here, right, so the content box is 92, so if we add up that 8, it equals 100. Okay, one last thing, there are a couple of things we can do to improve the site.

[00:09:02]
So our button elements don't do anything when we're clicked, but it would be nice to show the hover state and focus state on these so users recognize that they're buttons and they can interact with them. So the last thing I'm going to do before we wrap up the homepage here, I'm just going to set the cursor on our button to a pointer value.

[00:09:19]
So now users say, this is clickable, this is a button, right, I'm also going to give it a hover and a focus state button, hover, button, focus. And you notice I've combined these two selectors with a comma, saying both of these separate selectors, these are the styles to apply to both of them.

[00:09:39]
And in this case, I'm going to give it an outline, I'll say two pixels solid. We'll just say color text on primary, so it'll be white, right, in this case, so bar, color, text on primary. So, got our outline on hover, the outlines being applied, and see it's a little bit like not super smooth.

[00:10:06]
So just to fix that we can transition this property transition, outline, say point two seconds and linear. So there are a transition function, time, and the property that we want to transition here.
>> They're saying you need the units and the 0.20.
>> Are you serious?
>> Yes, so you need the seconds, yes.

[00:10:30]
>> Well, look at that, I love the chat and I love this room for not making me sit here in isolation. But that is such a silly little bug. CSS, okay, so that's it for this section of the homepage, it's looking great. It's done, so all that's left is to finish up the speakers page, which it looks like a lot, but we've already done quite a bit we just need to apply it now.