1 
2<label class="uiverse-pixel-checkbox">
3  <input type="checkbox" class="uiverse-pixel-checkbox-input" />
4  <span class="uiverse-pixel-checkbox-box"></span>
5  <span class="uiverse-pixel-checkbox-label">ENABLE CHEATS</span>
6</label>          

 1 
 2.uiverse-pixel-checkbox {
 3  display: flex;
 4  align-items: center;
 5  gap: 0.75em;
 6  font-family: "Courier New", monospace;
 7  font-size: 1em;
 8  font-weight: bold;
 9  color: #fff;
10  text-shadow: 0.125em 0.125em 0 #000;
11  cursor: pointer;
12  user-select: none;
13}
14 
15.uiverse-pixel-checkbox-input {
16  appearance: none;
17  margin: 0;
18  width: 1.5em;
19  height: 1.5em;
20  background: #ff6b35;
21  image-rendering: pixelated;
22  position: relative;
23  border: none;
24  box-shadow:
25    0 0 0 0.15em #000,
26    0 0 0 0.3em #fff,
27    0 0 0 0.45em #000,
28    0 0.4em 0 0 #d1451e,
29    0 0.4em 0 0.15em #000;
30  transition: background 0.2s steps(1);
31}
32 
33.uiverse-pixel-checkbox-input:checked {
34  background: #00cc66;
35}
36 
37.uiverse-pixel-checkbox-input:checked::after {
38  content: "✓";
39  position: absolute;
40  top: 0;
41  left: 0;
42  width: 100%;
43  height: 100%;
44  font-size: 1.1em;
45  color: #000;
46  display: flex;
47  align-items: center;
48  justify-content: center;
49  text-shadow: 1px 1px #fff;
50}
51 
52.uiverse-pixel-checkbox-input:hover {
53  background: #ff8c42;
54  animation: uiverse-glitch 0.3s steps(2) infinite;
55}
56 
57.uiverse-pixel-checkbox-input:focus-visible {
58  outline: 2px dashed #fff;
59  outline-offset: 0.2em;
60}
61 
62.uiverse-pixel-checkbox-label {
63  pointer-events: none;
64}
65 
66/* Glitch effect */
67@keyframes uiverse-glitch {
68  0% {
69    transform: translate(0, 0);
70  }
71  20% {
72    transform: translate(-1px, 1px);
73  }
74  40% {
75    transform: translate(1px, -1px);
76  }
77  60% {
78    transform: translate(-1px, -1px);
79  }
80  80% {
81    transform: translate(1px, 1px);
82  }
83  100% {
84    transform: translate(0, 0);
85  }
86}