Animated Button - Gradient Flip

A basic rectangular button, where the gradient flips direction on hover. Unfortunately gradients don't just fade, so we are going to use a css animation to handle the smooth transition from one gradient to another.

If you look closely at the css, you'll see that "flipping" is a misnomer here. The background gradient is actually being moved back and forth quickly, achieving the desired effect.

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-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;
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.15s ease 1;

}
#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