Button by flxderdev

1.button {
2  height: 55px;
3  width: 175px;
4  margin: auto;
5  align-items: center;
6  border-radius: 50px;
7  border: none;
8  text-align: center;
9  color: transparent;
10  text-shadow: 0 0 0 rgb(255, 255, 255);
11  font-size: 17px;
12  font-weight: 500;
13  text-transform: uppercase;
14  text-decoration: none;
15  box-sizing: border-box;
16  cursor: pointer;
17  transition: transform 50ms ease;
18  background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);
19  background-size: 400%;
20  display: block;
21  margin-right: auto;
22  margin-left: auto;
23  font-family: "Montserrat", sans-serif;
24}
25
26.button:hover {
27  -webkit-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);
28  -moz-box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);
29  box-shadow: 0px 0px 15px 0px rgba(155, 0, 194, 0.9);
30  animation: animate 8s ease infinite;
31  transition: box-shadow, 0.4s;
32  border: none;
33  font-size: 19px;
34  transform: scale(1.05, 1.05);
35  background: linear-gradient(90deg, #5f03f4, #f441a5, #b81fff, #5f03f4);
36  background-size: 400%;
37}
38
39.button:hover:before {
40  filter: blur(20px);
41  opacity: 1;
42  animation: animate 8s linear infinite;
43}
44
45@keyframes animate {
46  0% {
47    background-position: 0%;
48  }
49
50  100% {
51    background-position: 400%;
52  }
53}
54