Button Transition Solution

[00:00:00]
>> So let's talk about transitioning these dials so that it's a little bit smoother. So like we talked about, these transitions are going to happen when there is a state change. So we have this focus within where we change the color, now, of course transitions are applied to elements not to CSS variables, so we do need to do this within the individual elements itself.

[00:00:26]
So, for example, for UI input, we could set the transition property to border-color. Again, you want to avoid doing border because if you change the border width then that's just going to cause layouts, it's going to trigger layouts, and that's not gonna be performance. So we can also set the transition duration to let's say 0.3 seconds.

[00:00:52]
This is a nice defaults because this is between that 200 and 500 millisecond window where just feels natural to the user. Any longer than that, then it's gonna feel a little sluggish, any shorter than that it's going to feel instantaneous, so you might as well not even use an animation for that.

[00:01:10]
And let's also, we could add a transition timing function, but in this case it's not necessary. So even though the color is changing within the parents, because this color is being applied over here, this is going to pick up any transitions with that property. So now you could see that the border, now let me zoom in a bit there.

[00:01:33]
The border is smoothly transitioning from gray to blue, so to make it more visible let's do it with a button as well. So I'm gonna copy this over to the button, but instead of border color we're going to be animating the background color, so background color. And now you can see that it smoothly goes in and out.

[00:02:02]
Now of course this is a creative workshop you could play around with these styles. As a user focuses in the input, you might want the subscribe transition to happen a little bit later. So that they know that when they're done filling out their email, they could see the subscribe button and have their attention pulled towards that.

[00:02:23]
So we can also add a transition delay here. [COUGH] Let's just call it three seconds. And so now we're getting a little bit creative over here. And there we go, but I'll take that off for now. So within the button itself, if you want to go even further, you could, for example, when the button is hovered, we could have an opacity of 0.5.

[00:02:56]
And so now, you see it's immediately transitioning there and that's because we need to add opacity to our transition property. So now you can see it's pretty smooth. Change that to 0.7 and now let's actually transform that [COUGH] and move it down a little, so translateY and let's just give it 10%.

[00:03:23]
By the way, if you're not familiar with these translates and transforms in general, then the 10%, this is relative to the size of the elements itself. It's not gonna translate 10% from the parents or from the body, but rather it's going to take 10% of what that, in this case, the height of that element is, and it's going to move it down that much.

[00:03:47]
So that's happening on hover, and we had to also add that transform, so it's smooth, but let's add this to active. So we move transform to active. And now when we push down, we can see that it's transitioning, just like we want it to. All right, so were there any questions about this exercise?

[00:04:20]
Did any of you do anything beyond just transitioning these things or did you do anything creative? Someone in the chat said, I have expanded the button, it didn't look as cool as I thought. I think that looks pretty cool like, transform: scale, maybe 1.1, something really subtle, like just.

[00:04:41]
That looks fun, I like that, so, it's whatever you wanna do really. And of course, keep in mind, you could also change the easing of each of these things. So we could say, transition timing, function, maybe make that linear, linear, and ease-in-out, or a custom cute buzzer if he wants to, so.

[00:05:04]
>> Don't you normally with a link, it changes to it, the cursor to do you like a hand?
>> Yeah, there's actually debate about that, some people don't like that. Yeah, they say, the cursor pointer should only be used for links, but there are so many websites and apps where they use the pointer for buttons as well.

[00:05:22]
I personally like cursor pointer, so it feels more natural to me.
>> Yeah, to me like that, I always think that, it is nice like that.
>> There are some purists though who say, do not use it [LAUGH] but yeah.