Animated Button - Smooth Color to Gradient Change

A basic rectangular button, where the solid color changes to a gradient on hover. But gradients don't fade in gracefully, so this requires an actual css animation to power it. There is one animation that plays when the mouse hovers over the button, and another that plays when the mouse leaves the button (HoverIn and HoverOut respectively).

One downside of this method is that the "HoverOut" animation will play when the page loads. But if your button is far enough down the page, nobody will ever notice! And the alternative is not having a smooth gradient to solid transition.

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: #A37C40 linear-gradient(90deg, #decfb8 0%, #decfb8 50%, #A37C40 100%) 0% 0% no-repeat;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
background-size: 200% 200%;
background-position: 0% 0%;
animation: HoverOut 0.5s ease 1;

}
#button-example-1608:hover {
animation: HoverIn 0.5s ease 1;
background-position: 80% 0%

}
@keyframes HoverIn { 
    0%{background-position: 0% 0%}
    100%{background-position: 80% 0%}
}

@keyframes HoverOut { 
    0%{background-position: 80% 0%}
    100%{background-position: 0% 0%}
}

Pumpkins n' Pies