Animated Button - Smooth Color to Gradient Change

A rectangular button that shifts from a solid color to a gradient on hover. Since gradients don’t transition smoothly with transition, this effect uses actual CSS animations. The trick: the gradient background is already there - just positioned off-screen. On hover, the animation slides it into view.

Two keyframe animations are used - one for hover in, one for hover out - to create a smooth transition in both directions. The background position values in the animations are carefully coordinated with the hover state and animation timing to ensure a seamless effect without visible jumps. If your button has different dimensions, you may need to tweak these values for best results.

One quirk of this approach is that the "hover out" animation plays on page load. But unless the button is visible right away, it’s unlikely anyone will notice - and it’s a small price to pay for smooth, animated gradient transitions.

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;
background-size: 200% 200%;
background-position: 0% 0%;
animation: HoverOut 0.5s ease 1;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;

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

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

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

Pumpkins n' Pies