Moving color.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<style type="text/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;
}
</style>
</head>
<body>
<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>
</body>
</html>