Animated Button - Color Bar with Slide on Hover

A singular bar of the color on the left of this button invites the user to click! On hover, the color slides from left to right across the button, and the color of the text changes to remain visible. Like the other slide effect button(s), most of the work is done by a box-shadow rule.

HTML:

Copy to clipboard

<a href='#'><div id='button-example-1607'>Click here!</div></a>

CSS:

Copy to clipboard

#button-example-1607 {
color: #fffff7; 
background-color: #373936;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
box-shadow: inset 10px 0 0 0 #A3C09B;

-webkit-transition: ease-out 0.5s;
-moz-transition: ease-out 0.5s;
transition: ease-out 0.5s;

}
#button-example-1607:hover {
box-shadow: inset 200px 0 0 0 #A3C09B;
color: #373936;

}

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.

Pumpkins n' Pies