In this lesson, we'll use the `hover` pseudo class to conditionally style a button when the mouse hovers on the button. 

In this case, we'll use the scale CSS transform to change a button size on hover. Then we will add a transition to the transform to make the animation more natural looking.

https://app.egghead.io/api/v1/lessons/css-animate-a-button-on-hover-with-a-css-transform/subtitles

Animate a Button on Hover with a CSS transform

Instructor: [00:00] We have a button that says Hover Me, but we want to make it bigger on Hover. Type in button:hover. Add the curly braces. Then we would type in transform:scale(1.5). This will make it get bigger by one-and-a-half times its size.

[00:24] Then we would save, refresh, hover over the button. As you see, it does get bigger by one-and-a-half times its size. It's very stark. It's too fast. We want to smooth it out and make it look a lot better and more eased into it.

[00:41] We will go to the blue class. Type in transition, and then we would type in 04 seconds. That will let it ease into it and make it a lot more smooth. Let me spell transition correctly, and then go back to the hover button file. Now when we hover over the button, it still gets bigger, but it's a lot more smooth, and it eases into it.

[01:09] What we did, we added the :hover pseudo-class to the button element. Then we transformed it on hover to scale one and a half times its size. In order to make it go a lot smoother and look a lot better, we went to the blue class, and then added transition, and made it 04 seconds.

Animate a Button on Hover with a CSS transform

Share this video with your friends