How TO - Transition on Hover


Learn how to add transition on hover with CSS.


Transition on Hover

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

Add a transition effect (opacity and background color) to a button on hover:

Example

Fade in on hover:

Try it Yourself »

Example

Fade background on hover:

Try it Yourself »

Go to our CSS Transition Tutorial to learn more about transitions.


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.