Button Transition Exercise

[00:00:00]
>> Okay, so now let's get into our coding example. So what we're going to do is we're going to go to transitions and you're going to see here a very basic signup form. So, we have an input and we have a subscribe. And we also have, yeah, we also have some styles changing when you focus inside of here.

[00:00:23]
So, I'll show you how that looks in the CSS. So in the files, if you go to style.scss, we have a few colors over here as CSS variables, and a few other things too to help us. There's this selector or pseudo selector called focus-within, its really useful. It means if anything inside this elements is focused, then apply these styles to it.

[00:00:54]
And so we have a CSS variable here called color, which is initially set to color gray. So when we focus within, it changes to color blue. And so we are setting the border color of our input and the background color of our button to that CSS variable. However, the transition between those is not very smooth.

[00:01:15]
What I want you to do Is to smoothly transition these elements so that it goes from gray to blue when you focus inside of it, instead of it just being a direct transition. Now Furthermore, what you could do is when the button is clicked, you could also transition the style there, maybe give it some opacity, maybe move it down a little bit.

[00:01:40]
Remember, use transform and not the layout properties, and play around with that. If this is too simple to you then we also have this inflight example that I want to show you. Again, there's nothing being animated over here, there's just a whole bunch of things. And so there are some good opportunities for you to practice these techniques that you're learning in this little flight app.

[00:02:07]
So you could maybe add a transition to the button, maybe add a transition to the movies when you hover over them. And some of them are applied for you already, you just need to smoothly transition them. But yeah, just apply your skills to either this app or the smaller example over here, or both.