Transition – smooth effects

A sharp change in the background when hovering over the block, or a sharp change in the color of the button text when hovering, without effects does not look cool. To make a smooth “fade”, you need to use one property for the main element, and for its :hover. Code Examples:

Transition to change the background

.block {transition: background 0.5s ease;}
.block:hover {transition: background 0.5s ease;}

If you need to change the font color at the same time as changing the background, but faster, then use the example:

.block {transition: background 0.5s ease, color 0.3s ease;}
.block:hover {transition: background 0.5s ease, color 0.3s ease;}

Changing the block size via transition

.block { transition: background-size 0.5s ease;}
.block:hover {width: 50px; height: 50px;}