Animated Button - Color Slides in from Left on Hover

On hover, a different color slides in from the left. Note that all the work is done by a box-shadow rule!

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1605'>Click here!</div></a>

CSS:

Copy to clipboard

#button-example-1605 {

color: #fffff7; background-color: #2B1412; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center; box-shadow: inset 0 0 0 0 #D0A7A2; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; transition: ease-out 0.5s;

}

#button-example-1605:hover {

box-shadow: inset 200px 0 0 0 #D0A7A2;

}

Pumpkins n' Pies

For gluten-free baking enthusiasts and garden lovers: discover delicious, from-scratch recipes featuring sourdough, whole foods, and most importantly – pie! Explore gardening tips from east-central Illinois, along with a byte of code for fellow developers.
 © 2024 Abhishek & Miriam Chaturvedi