Styling Buttons Exercise

[00:00:00]
>> Steve Kinney: What I'm gonna have you do is if we look in our little skate park, there's other buttons that we might choose to make. A primary button, which we just made, a secondary button. And we'll look how to make one button where the prop handles it, but that's componenty, reacty stuff.

[00:00:18]
I'll show you how to do it. But right now we're just kind of focusing on the markup. So we'll have three buttons. Grab either the secondary button or the danger button or both, and try your hand at it. And then we'll do one of them together based on audience appeal when we get back.

[00:00:47]
All right, so our mission was to grab either the danger button or the secondary button and take a run at it. I am not going to do both because at some point you'll have watched me do the same thing three times. So I'm going to grab the secondary button because it allows me to make a segue at some point.

[00:01:07]
But I need my sidebar back. There we go. And we'll go ahead. I'm going to grab the secondary button, and we'll make that small and make that big. So this one in the first example, I kind of deleted the props and stuff like that. But let's do it in this one so we can see both and so we can just grab class name.

[00:01:37]
No, class does not react. Okay, so again, secondary button, that more subtle button. We could either say that the background is. Again, it's all our choice and what we want to do. So I could even say something like blue 100 if I wanted. Or we can just leave the background white at this point.

[00:01:59]
By default, it's technically transparent, so it's up to you. So if I wanted to just say bg-white, let's do that one, because not all colors have to have those numbers. Those are just what the variables are called. The variable for BG Blue 600 that we had in the last one was because there's a css variable called color blue 600.

[00:02:21]
There's not. You know, there are grays, but theoretically they're, you know, white is just the standard hex code in this case, and there's not different shades of it. Those are called gray. And so we've got this kind of white background. We can give it kind of like the same stuff we saw before.

[00:02:39]
We'll give it like PX of 3. I forgot what we did, py 1.5 feels right. Now the issue, obviously, as you can see here, is like, it's somewhat like suspicious where the borders of the button are. Before we had a solid color background. Now we've got the secondary button that's white.

[00:02:55]
It's on a very light background. We'll deal with that in a second. We will just do the other classes that we saw with the primary button. So we'll give it some rounding of the edges that we cannot see. And we can give that small shadow you can subtly.

[00:03:11]
Now it's slowly coming to life here with a little bit of pop from the shadow, which is obviously a little more obvious than we had on the blue one. But then we get to a conundrum, which is maybe we want to give this a border, right? This is not necessarily a tailwind thing.

[00:03:27]
This is just a border thing, which is we can say border. If you just say border, you will get, I think, like, you can actually see if you hover over it, you will get a one pixel border. Great. And you can even say stuff like anytime you load in a given color as the CSS variable.

[00:03:50]
So we had a CSS variable called dash dash color dash white. We had another one called dash dash color dash blue dash 600, they are available. So BG White will give you a white background border. White will give you a white border text. White will give you white text.

[00:04:10]
It takes that one CSS variable and it creates all the utility classes you could ever want. So I could say something like border. I could say border. I like slate instead of gray, but gray is an option too. Slate is just slightly bluer. Cool, cool, cool. And just to kind of show you, I can make it red if I wanted to.

[00:04:36]
>> Steve Kinney: I'll make it slate. And so we've got that border there. We've got a nice little shadow. In this case, we can. What else? Could we do this better? We should give it like a hover state, right? We'll say hover:bg-slate, I don't know, 100 feels right. So I can hover over it.

[00:04:59]
So we've got a button. We do have a little bit of a problem with this button that is not necessarily a tailwind thing and not super obvious, but it's something worth talking about, which is borders take up space, right? So let's say hypothetically, this button did not have a border and we want to say only have the border on hover, right?

[00:05:28]
You can see that the button kind of moves, which kind of looks cool, except I don't want it to happen because borders take up space. And so especially, like, if we made the border a little bit more extreme so if we said we're going to give it a border of like eight, which is a lot of border for a button, but it makes my point.

[00:05:51]
You can see the button itself moves dramatically, right? And considering that our primary button did not have a border, means that one of these buttons would have been bigger than the other if. No, I want that hover in place if we use a border everywhere. Luckily, it's not necessarily a tailwind problem because it's just putting a border on there.

[00:06:16]
It is, however, a fact of life with css. And we'll kind of look at this in a second that it does take up space. Let's go back to a regular border in this case. The other option is just do not use a border. So we have another option here called outline.

[00:06:37]
Outline. And we'll say that outline is slate,
>> Steve Kinney: 600. You can kind of see it moved a little bit here. And that even if I had an outline of 8, watch very closely as I hit save. The button itself doesn't move. So an outline is effectively a border that does not take up space.

[00:06:59]
This is good for interactive elements, where maybe I only want to put something on there, or when they hover over it, or if it's focused or something along those lines. I don't want the whole layout of my page shifting, right. We'll look at this more in a second.

[00:07:16]
But basically, my kind of rule is borders are cool for structural things like cards and sections and divs and stuff like that, where the border is part of the layout. But if it's something like an input element or something interactive, you probably want an outline. And they have a third sibling called ring, which we will talk about momentarily as well.

[00:07:36]
So we'll give this one outline of 2, which is outline, which is outline of 1. So this is actually no bigger than the primary button that has no sort of border whatsoever. So we've got this button here, too. Yeah, we have more to do with this button. There's definitely more to do to it, but I think we can change topics for a moment and then we'll come revisit our button and learn some things and do some more.