DEV Community

Jamie
Jamie

Posted on

CSS Button Transition (Animation)

Transitions: The transition CSS property specifies the name of the CSS property the transition effect is for. In this case we will be transitioning the transform property. You can transition most properties in CSS, like background, color, etc.

A transition needs a beginning and an end state. Thus, transitioning buttons is a great way to use them. Let's do that below.

The beginning state is div styles for the button, which is 200px wide, 75px in height, along with other CSS properties. Our end state will be a hover, or, when a user hovers over the button.

On hover the button changes its background color and scales down. To scale down we apply a transform property and set its value to scale which is a function of the transform property. Transformation functions can rotate, resize, distort and move an element in 2d or 3d space. In this case we are choosing the scale function to resize the button.


div {
width: 200px;
height: 75px;
border-radius: 50px;
background: #0000FF;
transition: transform .6s .25s ease-out; /* apply transition property to the object (div element) that will be transitioning and set the value to the property to transition */
} 


div:hover {
background: #0F0F94;
transform:scale(.9); /* apply transition effect */
} 

See CodePen here: shorturl.at/gx038

Discussion (4)

Collapse
manyeya profile image
Khutso siema • Edited

Try using 3 back ticks followed by css

Collapse
manyeya profile image
Khutso siema

Hey jamie try writing your posts using markdown,so we can better understand your code,here's a link to a markdown cheat sheet markdownguide.org/cheat-sheet

Collapse
jamiepo profile image
Jamie Author

Thanks. I made the changes.

Collapse
manyeya profile image
Khutso siema

Glad to help