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’.




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

Icons made by Madebyoliver from is licensed by CC 3.0 BY
Elmer Balbin

Web developer from Bacolod, Steam Sale hunter, and casual DotA 2 player.

about me

Leave a comment


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