<button class="reset anim-bg-gradient">Animated Button</button>
/* --------------------------------
š” How to animate the background gradient of a button
š https://codyhouse.co/nuggets/animated-button-gradients
-------------------------------- */
.anim-bg-gradient {
padding: 0.6em 1.2em;
border-radius: 0.375em;
cursor: pointer;
color: white;
background: linear-gradient(120deg, darkmagenta, crimson, orange);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position .5s;
}
.anim-bg-gradient:hover {
background-position: 0 0;
}
/* demo stuff */
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
This Pen doesn't use any external JavaScript resources.