How to add hover transition effects

Learn how to add hover transition effects with CSS.

Hover transition

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

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

Example

Mouse hover in:

Try it yourself

Example

Background fade out on mouse hover:

Try it yourself

Related pages

Tutorial:CSS transition