Button by kirzin

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