Animated Button - Gradient Flip

A basic rectangular button, where the gradient flips direction on hover. Since gradients don’t transition smoothly by default, we use a CSS animation to create a fluid shift between gradient states.

If you look closely at the css, you'll see that "flipping" is a misnomer here. Technically, the gradient isn’t flipping - it’s being repositioned. The background is scaled up and animated horizontally, creating the illusion of a directional change.

One caveat: the “hover out” animation runs on page load. But unless the button is high on the page, most users won’t notice - and the payoff is a smooth, eye-catching transition.

HTML:

Copy to clipboard

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

CSS:

Copy to clipboard

#button-example-1683 {
color: #fffff7; 
background: #D0A7A2 
            linear-gradient(90deg, #2b1412 0%, #d0a7a2 40%, #d0a7a2 60%, #2b1412 100%) 
            0% 0% no-repeat;
background-size: 200% 200%;
background-position: 0% 0%;
animation: HoverOut 0.15s ease 1;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;

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

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

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

Pumpkins n' Pies