Pumpkins n' Pies

Animated Button - Color Slides in from Left on Hover

A gentle fade is nice, but what if you want your hover color to slide in with flair? This effect is surprisingly simple—and can give your buttons a distinctive, eye-catching feel.

Here, the slide is created using an inset box-shadow. While typically used for casting shadows, box-shadow can also be inset to simulate a color overlay. Paired with a transition rule, this lets the color “fill” the button from left to right on hover.

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 #D0A7A2;
transition: ease-out 0.5s;

}
#button-example-1605:hover {
box-shadow: inset 280px 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 central Illinois, along with a byte of code for fellow developers.
 © 2026 Abhishek & Miriam Chaturvedi