1button,button::after {
2  padding: 10px 50px;
3  font-size: 20px;
4  border: none;
5  border-radius: 5px;
6  color: white;
7  background-color: transparent;
8  position: relative;
9}
10
11button::after {
12  --move1: inset(50% 50% 50% 50%);
13  --move2: inset(31% 0 40% 0);
14  --move3: inset(39% 0 15% 0);
15  --move4: inset(45% 0 40% 0);
16  --move5: inset(45% 0 6% 0);
17  --move6: inset(14% 0 61% 0);
18  clip-path: var(--move1);
19  content: 'GLITCH';
20  position: absolute;
21  top: 0;
22  left: 0;
23  right: 0;
24  bottom: 0;
25  display: block;
26}
27
28button:hover::after {
29  animation: glitch_4011 1s;
30  text-shadow: 10 10px 10px black;
31  animation-timing-function: steps(2, end);
32  text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8;
33  background-color: transparent;
34  border: 3px solid rgb(0, 255, 213);
35}
36
37button:hover {
38  text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
39}
40
41button:hover {
42  background-color: transparent;
43  border: 1px solid rgb(0, 255, 213);
44  box-shadow: 0px 10px 10px -10px rgb(0, 255, 213);
45}
46
47@keyframes glitch_4011 {
48  0% {
49    clip-path: var(--move1);
50    transform: translate(0px,-10px);
51  }
52
53  10% {
54    clip-path: var(--move2);
55    transform: translate(-10px,10px);
56  }
57
58  20% {
59    clip-path: var(--move3);
60    transform: translate(10px,0px);
61  }
62
63  30% {
64    clip-path: var(--move4);
65    transform: translate(-10px,10px);
66  }
67
68  40% {
69    clip-path: var(--move5);
70    transform: translate(10px,-10px);
71  }
72
73  50% {
74    clip-path: var(--move6);
75    transform: translate(-10px,10px);
76  }
77
78  60% {
79    clip-path: var(--move1);
80    transform: translate(10px,-10px);
81  }
82
83  70% {
84    clip-path: var(--move3);
85    transform: translate(-10px,10px);
86  }
87
88  80% {
89    clip-path: var(--move2);
90    transform: translate(10px,-10px);
91  }
92
93  90% {
94    clip-path: var(--move4);
95    transform: translate(-10px,10px);
96  }
97
98  100% {
99    clip-path: var(--move1);
100    transform: translate(0);
101  }
102}
103
104