<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; }