Glitch Grid
Filter buttons where the active state ghosts a cyan/magenta RGB-split clone of itself, vibrating subtly on hover. Brutalist meets cyberpunk.
Glitch Grid the 11th of 22 designs in the 22 CSS Button Group Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="cbgp-glitch" role="group" aria-label="Filters"> <button type="button" class="is-on">ALL</button> <button type="button">DRAFT</button> <button type="button">LIVE</button> </div>
.cbgp-glitch {
display: inline-flex;
background: #050810;
border: 2px solid #00ffe0;
box-shadow: 4px 4px 0 #ff5af1;
transition: transform 0.1s, box-shadow 0.1s;
}
.cbgp-glitch button {
padding: 11px 20px;
border: 0; border-right: 2px solid rgba(0,255,224,0.3);
cursor: pointer;
background: transparent;
color: #00ffe0;
font: 800 11px/1 ui-monospace, monospace;
letter-spacing: 0.18em;
position: relative;
transition: color 0.15s, background 0.15s;
}
.cbgp-glitch button::before, .cbgp-glitch button::after {
content: attr(data-text, '');
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
opacity: 0;
}
.cbgp-glitch button:last-child { border-right: 0; }
.cbgp-glitch button:hover { background: rgba(0,255,224,0.08); }
.cbgp-glitch button.is-on {
background: linear-gradient(90deg, rgba(0,255,224,0.18), rgba(255,90,241,0.18));
color: #fff;
text-shadow:
-1.2px 0 #ff5af1,
1.2px 0 #00ffe0;
}
.cbgp-glitch button:focus-visible { outline: 2px solid #ff5af1; outline-offset: -2px; }
.cbgp-glitch:focus-within { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #ff5af1; }