Simple box-shadow Button Hover Animation

Image: Simple box-shadow Button Hover Animation GIF

These set of button animation in Pure CSS using the box-shadow property was designed by Giana. There are six animation to choose from Fill In, Pulse, Close, Raise, Fill Up, Slide, Offset. Some of these will work well for CTA buttons on your landing page.

If you are having trouble with the pen, try the archived copy on GitHub

Button Hover Animation Snippet

See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.