1button {
2 text-decoration: none;
3 position: absolute;
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}