Button by DevVaradPatil

1button {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%,-50%);
6  width: 130px;
7  height: 45px;
8  text-align: center;
9  line-height: 45px;
10  color: #fff;
11  font-size: 15px;
12  text-transform: uppercase;
13  text-decoration: none;
14  font-family: sans-serif;
15  box-sizing: border-box;
16  background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);
17  background-size: 400%;
18  border-radius: 30px;
19  z-index: 1;
20  border: none;
21  outline: none;
22}
23
24button:hover {
25  animation: animate 6s linear infinite;
26}
27
28@keyframes animate {
29  0% {
30    background-position: 0%;
31  }
32
33  100% {
34    background-position: 400%;
35  }
36}
37
38button::before {
39  content: '';
40  position: absolute;
41  top: -5px;
42  left: -5px;
43  right: -5px;
44  bottom: -5px;
45  z-index: -1;
46  background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4);
47  border-radius: 40px;
48  filter: blur(20px);
49  opacity: 0;
50  transition: 0.5s;
51}
52
53button:hover::before {
54  filter: blur(20px);
55  opacity: 1;
56  animation: animate 6s linear infinite;
57}