This is an amazing css with animated gradient button on hover with html and css only from Darkcode. Just click on the button Run Pen to see how it works:
How to create an animated gradient button
Step 1: Add Html
<div class="container">
<button class="btn btn1">Hover me</button>
<button class="btn btn2">Hover me</button>
<button class="btn btn3">Hover me</button>
<button class="btn btn4">Hover me</button>
</div>Step 2: Add CSS
body {
margin: 0;
padding: 0;
background: #f1f1f1;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn {
border: none;
margin: 20px;
padding: 24px;
width: 220px;
font-family: 'montserrat', sans-serif;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
color: #fff;
background-size: 200%;
transition: 0.6s;
}
.btn1 {
background-image: linear-gradient(to left, #ffc312, #ee5a24, #ffc312);
}
.btn2 {
background-image: linear-gradient(to left, #c4e538, #009432, #c4e538);
}
.btn3 {
background-image: linear-gradient(to left, #12cbc4, #0652dd, #12cbc4);
}
.btn4 {
background-image: linear-gradient(to left, #fda7df, #9980fa, #fda7df);
}
.btn:hover {
background-position: right;
}