How to add hover transition effects

Learn how to add hover transition effects using CSS.

Transition on hover

CSS transitions allow you to smoothly change the value of properties over a given duration (from one value to another).

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

Example

Mouse over to fade in:

Try It Yourself

Example

Background Fade Out on Hover:

Try It Yourself

Related Pages

Tutorial:CSS Transition