Animated Button - Smooth Color Change

This is the more refined version of the basic rectangular button. The background color still changes on hover, but now it does so smoothly—giving the button (and your site) a more responsive, polished feel.

It’s all thanks to a single rule:

transition: background-color 200ms linear;

This tells the browser to animate any change in background color. Including it in both the base and hover states ensures a smooth transition in both directions.

HTML:

Copy to clipboard

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

CSS:

Copy to clipboard

#button-example-1604 {
color: #fffff7; 
background-color: #A37C40;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
transition: background-color 200ms linear;

}
#button-example-1604:hover {
background-color: #2B1412;
transition: background-color 200ms linear;

}

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.

Pumpkins n' Pies