2.2 Enhancing Button Hover States

In our last lesson I showed you a few different ways to create CSS animations. In this lesson we'll get a bit more familiar with these animation techniques and a real world example by animating a button. So let's create a new folder here, and we'll just call this Animating a Button. And then drag that down to Sublime Text. And let's create a new file called index.html. And another file called, in our CSS folder called style.style. Okay? And now our boilerplate. And let's go ahead and create a button in here. And we'll just have this button say, button on it. And just to make sure everything is working with Stylus, let's go over here and create a CSS rule says, button background red. Save that. Open up our terminal. Cd to our desktop. Cd to animating a Button. Cd to our CSS folder. And now we can say stylus, use auto prefixer, watch style.style. [BLANK_AUDIO] Okay, let's open this up in Chrome. [BLANK_AUDIO] Oh, and make sure that we've linked to our style sheet. [BLANK_AUDIO] All right, so great, it's working now. So, the first thing I want to do is make this button pretty, because I hate working with demos that look ugly. So. First, let's go push this off the edge up here by saying HTML, padding 3 rems. Save and refresh. Okay. And let's say background, and this is one of Stylus's features, we can say lighten red 40%. So it will give us a color that's 40% lighter than that red. Okay, maybe that's a little bit too pink. We'll just say 20%. Okay, that looks good to me. Let's make the color of this button white. Let's get rid of the border altogether. Let's add some padding to it, so it's like, padding 0.5 m's. And, by 2 m's. Let's just see what it looks like now. Okay. And actually we'll make the padding a little bit bigger. [BLANK_AUDIO] Okay, let's give it a border radius of three pixels. [BLANK_AUDIO] And we'll say cursor pointer, just so whenever we hover over it we get the little hand that makes it look like it's click-able. So now, the next thing I want to do is animate this button to make it look like it's being pushed down. So whenever they hover over it, it'll be pushed down a little bit and whenever they click on it, it'll be pushed down just a little bit more. And the way I wanna do that is to give this a border on the bottom, and then make that border a little bit smaller each time for each date. So we'll start off with a border bottom of three pixels and we'll make it solid and we'll make it that red color. And let's make it 10%, see what that looks like. It's not dark enough, so maybe we can darken it 10%. Okay, that looks good. So now we'll say and hover and remember if you're used to traditional CSS, this is button hover. Well the Stylus we can just append states onto our selector here just by using the ampersand. So let's say and hover, and we'll say border bottom width two pixels. So refresh and why don't we hover over it. The border shrinks a little bit. But it's like it's pulling the border up. So what we can do is say margin top one pixel. So this should push it off the top by one pixel and shrink the border which will give it the effect that we are looking for. All right, good. And then we can say, and active, and focus. Border bottom width, one pixel. Margin top, two pixels. [BLANK_AUDIO] And now when we click on it, it goes down even further, and I'm just gonna get rid of the outline here, so say none, just so we can see what's going on. [BLANK_AUDIO] Now, this is a type of animation where we're actually animating without key frames and without transitions. So as you can see like, you know, as we hover over it, it sinks in, we click on it, it sinks in even further. But let's make this button even fancier by adding some transition animation. So what we can do with transitions is we can set like a background, that starts up here and is like a dark gradient color, and goes down to like a light gradient color. And then as we hover over the button, we can have that background shift down. It might not make sense explaining it like that, but you'll see what I mean here in a second. So first let's create two span tags inside of our button here. [BLANK_AUDIO] So this first one we'll say span class is button text. And then we'll just create another one span class button background. Okay. Now let's go over here and in our Stylus we can say, we want that button background to be position absolute. And if we're going to do that then we need to make the button position relative. And we give it a background color of, we'll just say blue for right now. And we'll say we want to be top zero, left zero, width 100% of the button size, and our height, 200% of the button size. So let's refresh and see what that looks like. Okay. So we're covering up our button completely. We really can't see what's going on. So let's shift it off to the left about 30 pixels. Okay now it can see what's going on. We'd also like to go ahead and shove this blue box up above our button. So we can say top can be negative 100%. Good, perfect. And whenever we hover over our button, we want this button background. Say top zero, so refresh. Cool. So, again it seemed like the, the jerky motion, where we're just gonna switch from one color to the next and we don't want that. We want it to transition. So what we're gonna do is this button background, we're gonna add a transition of all and we'll say 600 milliseconds and ease. Let's come over here, refresh, and hover over your button and now we've got this block every time we hover going up and down. So, that's pretty cool in and of itself. But let's go ahead and make this button text right here above this block, so we can do that just by coming in here and saying button text position relative z index 1, okay? So now we got our button text above it. And now let's come up here and with our or actually, let's go, stay down here. In our button background, we want to make the background color of it not blue. But a linear gradient. We'll say to bottom, and say just black and white, just to see what it looks like. Okay, so black's gonna be up here at the top, white's gonna be at the bottom and as you can see it's scrolling down there. It's transitioning downwards. So, what we can do up here, on our button, we can say overflow hidden, save, come over here and refresh. And, now it's clipping that off. So now, you can kind of see like, the transition effect going on. So, now we can. Now we can come over here and it says left and you say zero to pull it back over. Okay. And now, let's pick some better colors. So, we'll say lighten red 40% and lighten red 10%. So refresh, hover over it, and you can see it's got this gradient animation applied to it. So that's one way to style buttons using transition animation to kind of give it that that Google button effect. It's just a really cool way to animate buttons. So now the last thing I wanna show you in this lesson is how to animate a button or any element with a key frame, with key frame animations. So we'll go down here to the bottom and we'll say, key frames shake button. Then 25%, we want it to go left two pixels and at 50% we want it to go right two pixels, or negative two pixels. So, it should go back and forth like that. So, up here in our, active focus states whenever we click on this button it will make this animation. We'll say animation. Shake button. 20 milliseconds. Infinite. So this button's about to go crazy. So let's refresh, click on it. And you can see it bouncing back and forth really fast. Click off of it and click on it again. So you probably won't use an animation like that. On an upcoming lesson, we'll look at the animate.css library and it has some more natural looking ani-, keyframe animations that you might actually make use of. So I was just kinda showing you there that we can apply these animations to anything, including simple buttons. So, as you can see in this lesson, there are plenty of places to use animations. Even a boring old button can spice up a little with some CSS animation. The trick is, just makes sure when you use animations, to use them in a subtle way or else your, your animations will become a distracting burden. In our next lesson, we'll create a drop-down menu that slides out using CSS animation.