In this guide you can find out how to do a gentle fade between two colors when hovering over a button.
In our button example, we can change the background of our button by defining a different background color for the
:hover dynamic pseudo-class. However, hovering over the button will cause the background-color to snap to the new color. To create a more gentle change between the two, we can use CSS Transitions.
After adding the desired color for the hover state, add the
transition property to the rules for the button. For a simple transition, the value of
transition is the name of the property or properties you wish this transition to apply to, and the time that the transition should take.
:focus pseudo-classes the
transition property is set to none, so that the button snaps to the active state when clicked.
In the example the transition takes 1 second, you can try changing this to see the difference a change in speed makes.