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:

Example

Fade background on hover:

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