Color slide effect on hover using CSS

A nice and simple hover effect where the background color shifts from right to left on hover. This is achieved by animating the ‘background-position’ property and increasing the width of the background using ‘background-size’.

HTML

CSS

Output

See the Pen Simple hover color slide effect by Elmer Balbin (@elmzarnsi) on CodePen.27172

Icons made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY
Elmer Balbin

Web developer from Bacolod, Google Local Guide, and casual DotA 2 player.

about me

Leave a comment

avatar

Get great deals on hotel rooms from all over the world BOOK NOW