1button {
2  --color2: #ff206e;
3  padding: 15px 30px;
4  border-radius: 18px;
5  border: 1px solid #282828;
6  background-color: #212121;
7  box-shadow: inset 2px 2px 5px rgb(22, 22, 22);
8  position: relative;
9  overflow: hidden;
10}
11
12button::after {
13  content: '';
14  height: 30px;
15  width: 60px;
16  position: absolute;
17  box-shadow: 0 0 20px 10px var(--color2);
18  bottom: -45px;
19  left: 21%;
20  transition: 0.4s 0.3s;
21}
22
23button svg {
24  --move2: inset(31% 0 40% 0);
25  --move3: inset(39% 0 15% 0);
26  --move4: inset(45% 0 40% 0);
27  --move5: inset(45% 0 6% 0);
28  --move6: inset(14% 0 61% 0);
29  --move7: inset(0 0 0 0);
30  clip-path: inset(50% 50% 50% 50%);
31  margin-left: 5px;
32  transition: 0.4s;
33}
34
35button:hover svg {
36  clip-path: var(--move7);
37  animation: glitch_4011 0.4s;
38  animation-timing-function: steps(2, end);
39}
40
41button:hover:after {
42  bottom: -40px;
43  width: 100px;
44}
45
46button .icon_shadow {
47  display: flex;
48  align-items: center;
49  transition: 0.4s;
50  color: var(--color2);
51  font-weight: bold;
52  filter: drop-shadow(0 0 10px var(--color2));
53}
54
55button:hover .icon_shadow {
56  filter: drop-shadow(0 0 10px var(--color2));
57}
58
59@keyframes glitch_4011 {
60  0% {
61    clip-path: var(--move1);
62    transform: translate(0px,-10px);
63  }
64
65  10% {
66    clip-path: var(--move2);
67    transform: translate(-10px,10px);
68  }
69
70  20% {
71    clip-path: var(--move3);
72    transform: translate(10px,0px);
73  }
74
75  30% {
76    clip-path: var(--move4);
77    transform: translate(-10px,10px);
78  }
79
80  40% {
81    clip-path: var(--move5);
82    transform: translate(10px,-10px);
83  }
84
85  50% {
86    clip-path: var(--move6);
87    transform: translate(-10px,10px);
88  }
89
90  60% {
91    clip-path: var(--move1);
92    transform: translate(10px,-10px);
93  }
94
95  70% {
96    clip-path: var(--move3);
97    transform: translate(-10px,10px);
98  }
99
100  80% {
101    clip-path: var(--move2);
102    transform: translate(10px,-10px);
103  }
104
105  90% {
106    clip-path: var(--move4);
107    transform: translate(-10px,10px);
108  }
109
110  100% {
111    transform: translate(0);
112  }
113}
114