1button,
2button::after {
3 padding: 16px 20px;
4 font-size: 18px;
5 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
6 border: 0;
7 color: #fff;
8 letter-spacing: 3px;
9 line-height: 1;
10 box-shadow: 6px 0px 0px #00e6f6;
11 outline: transparent;
12 position: relative;
13}
14
15button::after {
16 --slice-0: inset(50% 50% 50% 50%);
17 --slice-1: inset(80% -6px 0 0);
18 --slice-2: inset(50% -6px 30% 0);
19 --slice-3: inset(10% -6px 85% 0);
20 --slice-4: inset(40% -6px 43% 0);
21 --slice-5: inset(80% -6px 5% 0);
22 content: "HOVER ME";
23 display: block;
24 position: absolute;
25 top: 0;
26 left: 0;
27 right: 0;
28 bottom: 0;
29 background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
30 text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
31 clip-path: var(--slice-0);
32}
33
34button:hover::after {
35 animation: 1s glitch;
36 animation-timing-function: steps(2, end);
37}
38
39@keyframes glitch {
40 0% {
41  clip-path: var(--slice-1);
42  transform: translate(-20px, -10px);
43 }
44
45 10% {
46  clip-path: var(--slice-3);
47  transform: translate(10px, 10px);
48 }
49
50 20% {
51  clip-path: var(--slice-1);
52  transform: translate(-10px, 10px);
53 }
54
55 30% {
56  clip-path: var(--slice-3);
57  transform: translate(0px, 5px);
58 }
59
60 40% {
61  clip-path: var(--slice-2);
62  transform: translate(-5px, 0px);
63 }
64
65 50% {
66  clip-path: var(--slice-3);
67  transform: translate(5px, 0px);
68 }
69
70 60% {
71  clip-path: var(--slice-4);
72  transform: translate(5px, 10px);
73 }
74
75 70% {
76  clip-path: var(--slice-2);
77  transform: translate(-10px, 10px);
78 }
79
80 80% {
81  clip-path: var(--slice-5);
82  transform: translate(20px, -10px);
83 }
84
85 90% {
86  clip-path: var(--slice-1);
87  transform: translate(-10px, 0px);
88 }
89
90 100% {
91  clip-path: var(--slice-1);
92  transform: translate(0);
93 }
94}
95