Animated Button - Smooth Color to Gradient 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-1608'>Click here!</div></a>

CSS:

Copy to clipboard

#button-example-1608 {

color: #fffff7; background: #D0A7A2 linear-gradient(90deg, #D0A7A2 0%, #D0A7A2 100%) 0% 0% no-repeat; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center; -webkit-transition: background 1000ms linear; -ms-transition: background 1000ms linear; transition: background 1000ms linear;

}

#button-example-1608:hover {

background: #D0A7A2 linear-gradient(90deg, #D0A7A2 0%, #D1B589 100%) 0% 0% no-repeat; -webkit-transition: background 1000ms linear; -ms-transition: background 1000ms linear; transition: background 1000ms 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