Pumpkins n' Pies

Animated Button - Smooth Color Change

A basic rectangular button, where the color changes on hover. But now we have a little bit of CSS animation causing the button to transition color smoothly.

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;
-webkit-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;

}
#button-example-1604:hover {
background-color: #2B1412;
-webkit-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
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 east-central Illinois, along with a byte of code for fellow developers.
 © 2025 Abhishek & Miriam Chaturvedi