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