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
Top comments (4)
Try using 3 back ticks followed by css
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
Thanks. I made the changes.
Glad to help