1button {
2  position: relative;
3  padding: 18px 55px;
4  font-size: 15px;
5  font-weight: bold;
6  color: #fff;
7  background: linear-gradient(87deg, #6d67e4, #7743db, #4e31aa, #6d67e4, #6d67e4);
8  background-size: 600% 600%;
9  border: 3px solid #7743db;
10  border-radius: 8px;
11  /* filter: drop-shadow(0 0 4px #9F73AB); */
12  box-shadow: inset 0 0 10px 1px #7743db, 0 0 10px 5px #7743db;
13  cursor: pointer;
14  transition: all 0.5s;
15  animation: GradientAnimation 25s ease infinite;
16}
17
18button::after {
19  content: "";
20  position: absolute;
21  width: 202px;
22  height: 54px;
23  top: 0;
24  left: -17px;
25  border: 5px solid #453c67;
26  border-width: 0 2px 4px 0;
27  border-radius: 100%;
28  filter: drop-shadow(0px 0px 6px rgba(78, 49, 180, 1));
29  transform: rotate(-30deg);
30  animation: LinerAfter 15s ease infinite;
31}
32
33button::before {
34  content: "";
35  position: absolute;
36  width: 200px;
37  height: 50px;
38  top: 0;
39  left: -20px;
40  border: 5px solid #6d67e4;
41  border-width: 0 12px 8px 4px;
42  border-radius: 100%;
43  filter: drop-shadow(0px 0px 6px rgba(109, 103, 228, 1));
44  /* box-shadow: inset 0 0 10px 1px #4E31AA, 0 0 10px 5px #4E31AA; */
45  transform: rotate(-30deg);
46  transition: all 0.5s;
47  animation: LinerBefore 15s ease infinite;
48}
49
50@keyframes GradientAnimation {
51  0% {
52    background-position: 0% 50%;
53  }
54
55  50% {
56    background-position: 100% 50%;
57  }
58
59  100% {
60    background-position: 0% 50%;
61  }
62}
63
64@keyframes LinerAfter {
65  0% {
66    left: -27px;
67    height: 54px;
68  }
69
70  50% {
71    left: -7px;
72    height: 37px;
73  }
74
75  100% {
76    left: -27px;
77    height: 54px;
78  }
79}
80
81@keyframes LinerBefore {
82  0% {
83    left: -30px;
84    height: 50px;
85  }
86
87  50% {
88    left: -10px;
89    height: 33px;
90  }
91
92  100% {
93    left: -30px;
94    height: 50px;
95  }
96}
97