Styling Buttons

[00:00:00]
>> Kevin Powell: If we take a look at our page now, it's mostly coming together. Everything is actually looking pretty good. It's following the layout. I think I chose the wrong font size here because they're a little bit big, so we'll tweak that in a minute. But other than that, things are coming together pretty nicely and matching the design.

[00:00:13]
Other than we have the footer and the buttons, so we'll tackle the buttons first. There's nothing complicated with these. This is a situation where I'm gonna do it. We only have one style of button, so I'm gonna make the button the way I need it to look. You could potentially use a lot of the same approach that we did with our card to make things more adaptable.

[00:00:31]
This would make a lot of sense if you had lots of different buttons or coming in with different modifier classes for it as well. But it's one of those things where I sort of build it to work with what I need just with the eye on in the future, maybe I'll need to tweak this a little bit.

[00:00:44]
But yeah, we can just come in with the buttons, how we need them to look. There's nothing too complicated with them. One thing with the button, I'm still in my components layer. We'd already put the button class on them, if I find it. I already put the class of button on there from the beginning.

[00:01:02]
So, on that, one thing that I usually do is a display of inline flex. In this case, an inline block would work as well. Either one of them would be completely fine. You can also do inline flex like that or like that. They both work. The reason for that is inline is the outer version of it.

[00:01:18]
The flex is the inner version of it, will do this, but yeah, we now have a two syntax display. So you can declare the outer and inner as two separate values. I just do that in this case, we don't have any icons or other things, it's just text, but it's one of those things that if ever you had a button that needs an icon, it's nice that it's already a flex item.

[00:01:36]
You could probably just do a display flex 2, but I tend to do in-line flex, then nothing fancy. We need a little bit of padding which we're gonna do last, actually, I'm gonna take the padding off. But you will need a bit of padding or we'll put it on there.

[00:01:49]
But we'll have to adjust that once we're looking at it, a background color which is the accent, I think it's the main accent color, we have the font families actually different. The font family looking at it, it's the font family of the font family heading. The font weights, looks like it's bold.

[00:02:12]
I didn't create any customer properties for the weights. If you have lots of weights it can be useful, but in this project we decided to bold and the regular, so it's easy enough just to declare the one you need, where you need it. Let's go take a look to see if I, one more thing, text decoration of none.

[00:02:31]
And another thing that I tend to do on all of my buttons, even though I don't need to right now is a cursor pointer. It's a button class. It might get put on a button element or on a link like we're doing now. There's already people who don't like links that look like buttons, and there's people who don't like having cursors on buttons either, but it just gives us the little hand pointer regardless of what we're putting it on.

[00:02:59]
So I'll always like having the hand icon there. If you have opinions on that, that's fine. I'm gonna put it. Looking at it now, I see I need a border radius. So border radius 2, I'm guessing. That looks pretty good and looks like it matches it. The font size, I think, right now the font size is inheriting, so it's kind of large, it's matching this big font size we have here.

[00:03:25]
So I'm actually going to declare a font size on it as well, of a font size, probably the medium one. It's a little bit smaller. And again, if we look at the Figma file, you'd be able to get the font size that's being used on it. But I know just looking at it here, the font size is definitely smaller than the paragraph here.

[00:03:50]
This one's a large so I'm just dropping down one to the medium. This could potentially be something you have a modifier for where different buttons have different font sizes on them. But in this case, we don't need that. So I think we can leave it just like that.

[00:04:02]
And then I wanna bring in the hover state, just because I don't really like the text just changing, it looks weird for a button. You could use nesting here, but I'm just gonna do button hover, button focus visible, just like we did before. And on that the color can stay the same.

[00:04:25]
So that was our high contrast. And then the background can just get a bit later, background color, can be the accent. Green is accent and that should, let's just move this over so you can see all of it. And there we go. It's a nice, simple one. There's nothing fancy.

[00:04:50]
This could be definitely something you add some transitions to do something fancier with, but at least we can see it's being highlighted, and if you tab over to it through keyboard navigation it works perfectly fine as well. So nothing too fancy with our button, but at least it's looking a little bit better, works in both cases right there.

[00:05:07]
So I think that's pretty good to go.