Button Hover Effects With Box-Shadow

See the Pen Button Hover Effects With Box-Shadow by giana (@giana) on CodePen.

Button Hover Effects With Box-Shadow

Description: Making some basic animations with box-shadows. No extra elements or even pseudo elements required. Tips: - We're setting all the blurs to 0 since we want a solid fill; - Add the inset keyword so the box-shadow is on the inside of the element; - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right]); - Multiple shadows can be stacked; - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy.

Browsers: Chrome Edge Firefox Opera Safari

Made with: HTML CSS (SCSS)

Responsive:No

Posted: 4.06.2017

Similar Examples