<button class="ccb-glitch" aria-label="Close"><span class="ccb-g-x">✕</span></button>

.ccb-glitch {
  width: 38px; height: 38px;
  border: 1px solid rgba(46,204,138,0.3);
  background: #0c0c12;
  font-size: 16px; font-weight: 700;
  cursor: pointer; position: relative;
  color: #2ecc8a;
}
.ccb-g-x { position: relative; z-index: 1; }
.ccb-glitch::before, .ccb-glitch::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.ccb-glitch::before { color: #ff6c8a; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); animation: ccb-gl-t 2.4s infinite steps(2); }
.ccb-glitch::after  { color: #7c6cff; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); animation: ccb-gl-b 2.4s infinite steps(2); }
.ccb-glitch:hover::before, .ccb-glitch:hover::after { animation-duration: 0.3s; }
@keyframes ccb-gl-t { 0%,90% { transform: translateX(0); } 92% { transform: translateX(-3px); } 94% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes ccb-gl-b { 0%,90% { transform: translateX(0); } 92% { transform: translateX(3px);  } 94% { transform: translateX(-3px); } 100% { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .ccb-glitch,
  .ccb-glitch * {
    animation: none !important;
  }
}