How to add a transition effect on hover

Learn how to add a transition effect on hover with CSS.

Transition on hover

CSS transition allows you to smoothly change attribute values over a given duration (from one value to another).

Add a transition effect (transparency and background color) to the button when the mouse hovers:

When the mouse hovers, fade in:

Bakgrundsfärg försvinner vid muspekare: