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