Button Interactive States

[00:00:00]
>> Let's do the part that is relatively straightforward for these SOLD OUT buttons and let's also do some hover states as well. So what you can't see in the picture, is when you hover over these buttons, so I'm hovering over my BUY TICKETS button. I would like it to turn cyan.

[00:00:21]
Cyan text and cyan border, anybody have any idea how it would go about doing that?
>> So do like button-primary:hover?
>> Yep, button-primary:hover, exactly, okay? And we want to change the text color and the border color. So how do we do that?
>> Set your color.
>> So what would I type?

[00:00:55]
>> So color, and then you said you wanted it-
>> Color: var (--cyan), okay? So now when I mouse over the button, not the SOLD OUT buttons, the BUY TICKETS buttons, I get blue text. But my border stays pink. Now, if you like it, you can keep it, but your designer said make that border change color, too.

[00:01:17]
So how do I do that?
>> Border-color:var, and then cyan.
>> Yeah, border-color: var (--cyan). In other words, you don't have to type the whole border properties over again all you need to do is just change the color. So when you roll your mouse over it, now we got a, ooh, everything turns blue, how cool is that?

[00:01:43]
Okay, we approve. Now we can roll our mouse over the SOLD OUT buttons, but notice they're not clickable, right? That is bad UX, and now you have the entire UX department mad at you, you have major usability problem on your hands. So now we need to fix that, okay?

[00:02:01]
So let's set that up. Remember that on the SOLD OUT buttons, we have an additional class, right? So we're gonna put that after our button primary so we can override stuff, yeah? Okay so this one is gonna be button-sold out. And there's a couple of things we can change immediately on that.

[00:02:25]
Notice that in our picture, they look a little bit faded out maybe [LAUGH] It's it's clear on your screen that's in front of you trust me they look a little bit faded out. So what could I do here to make that look a little bit more faded out

[00:02:43]
>> Opacity.
>> Something to do with opacity, right? The problem with opacity as a property, this property opacity, is everything inside of that particular element will become opaque. And you don't necessarily always want that, we want the color to become opaque, but not everything else, right? So what's another way that I could do this?

[00:03:06]
>> Could use the magenta 50.
>> The magenta 50, right? So we can say our color is var(--magenta50) and our border color is var(--magenta50), okay? So those definitely look a little bit faded out relative to the buy tickets, All right, now we have the last part, which is really hard cuz those designers they made a vertical line through our button or diagonal line through our button.

[00:03:45]
How on Earth are we going to make a diagonal line through our button, any suggestions?
>> Pseudo element?
>> Maybe a pseudo element maybe. Do a linear gradient,
>> A linear gradient, this is a really cool idea. So if you take a look, I have a think of it's on the webpage as well, I have a link to this code pen.

[00:04:16]
So I Googled for this and I said how do you make a diagonal line on your webpage? And this guy, I forked his code pen, and you'll see here in the HTML, he's using tables, but it's the same idea here, just basic, straight up, simple HTML. But in the CSS, he has the so called simple way, see that, diagonal cross.

[00:04:47]
So it's a linear gradient that's set up in this way. So let's copy that line of code, it's on line 40, just that background part there. Copy that and let's put that in our code pen here on button-soldout, we're just gonna paste it in directly, just what it is and let's see what happens.

[00:05:10]
Nice? That's pretty cool. Now it's not the way the button's supposed to look, but we're closer, aren't we? All right, so how are we going to make it look exactly right now? What do we need to change?
>> Change black to magenta 50.
>> Change black to magenta 50, so where it says black here we're gonna say var(--magenta50), okay?

[00:05:45]
What else?
>> Change white to like an rgb of like zero opacity.
>> Yeah, we need to take out the white, we can actually just use the keyword transparent.
>> Okay. Okay, that helps some, this is what I got here, okay? Linear gradient, two top right, here's the other white, the other white is right here.

[00:06:14]
So take out both of the whites and change them to transparent. Okay, what if we want the line to be a little thicker?
>> Just increase the pixels. Why don't we increase the pixels here? So instead of 1 pixel, let's say 2, so +2 and -2. All right, we still have one final problem here.

[00:06:39]
When I roll my mouse over this button, it's still giving me this hover state, isn't it? What do I need to do now?
>> Button-soldout hover.
>> Button-sold out:hover. And what am I gonna change? Just change the colors, so magenta 50.
>> Yeah, var(--magenta50). And border-color: var(--magenta50).
>> If you wanted to you could also put a pointer dash events on button-sold out, and set that to none.

[00:07:23]
>> Pointer, I'm sorry, what is it, pointer?
>> So you don't want to do it on the hover state, but rather the opening class.
>> Yeah?
>> Pointer-events: none.
>> Pointer-events: none.
>> And then the hover shouldn't, you shouldn't even need the hover.
>> Okay. So if we get rid of the hover?

[00:07:51]
>> And that way your cursor doesn't, it'll still show a pointer in some sort of way.
>> Still shows a pointer and we don't even need the hover state, how cool is that? So there you go, learn something new every day. So pointer-events: none, there we go. Alternative solution, no hover needed, there we go.

[00:08:16]
Okay so either one of those would work. Obviously, pointer events as many fewer lines of code.