Glitch slice

Glitch slice: a CSS button. Copy the rules, or the prompt that rebuilds it.

cyberpunkglitchrectangleclip-pathanimated

CSS

.btn-141 {
  position: relative;
  font: 800 15px/1 ui-monospace,Menlo,monospace;
  letter-spacing: .15em;
  color: #f0abfc;
  background: #0a0a0f;
  border: 1px solid #f0abfc;
  border-radius: 0;
  padding: 14px 30px;
  cursor: pointer;
  transition: background .15s
}
.btn-141::before,.btn-141::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0a0a0f;
  opacity: 0;
  pointer-events: none
}
.btn-141::before {
  color: #22d3ee;
  clip-path: polygon(0 0,100% 0,100% 40%,0 40%)
}
.btn-141::after {
  color: #f43f5e;
  clip-path: polygon(0 60%,100% 60%,100% 100%,0 100%)
}
.btn-141:hover::before,.btn-141:hover::after {
  opacity: 1;
  animation: gl141 .5s steps(2) infinite
}
.btn-141:hover::after {
  animation-direction: reverse
}
.btn-141:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 3px
}
.btn-141:active {
  background: #f0abfc;
  color: #0a0a0f
}
@keyframes gl141 {
  0% {
    transform: translate(-3px,0)
  }
  50% {
    transform: translate(3px,-1px)
  }
  100% {
    transform: translate(-2px,1px)
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-141, .btn-141 * { animation: none; transition: none; }
}

HTML

<button class="btn-141" data-text="ENTER">ENTER</button>

Prompt

A cyberpunk glitch button: square corners, near-black #0a0a0f, 1px pink #f0abfc border, monospace 15px extra-bold pink text with 0.15em tracking, 14px by 30px padding. On hover two copies of the label (from data-text) appear, one cyan clipped to the top 40% and one red clipped to the bottom 40% via clip-path polygons, jittering a few pixels in opposite directions with stepped 0.5s animations. Active inverts to pink fill with dark text. Focus 2px cyan outline.

Glitch slice

Same shelf