Fatia glitch

Fatia glitch: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão glitch cyberpunk: cantos retos, quase preto #0a0a0f, borda de 1px rosa #f0abfc, texto rosa monoespaçado de 15px extra-bold com tracking de 0.15em, padding de 14px por 30px. No hover aparecem duas cópias do rótulo (vindas de data-text), uma ciano recortada nos 40% superiores e uma vermelha recortada nos 40% inferiores via polígonos de clip-path, tremendo alguns pixels em direções opostas com animações em steps de 0.5s. No active inverte para preenchimento rosa com texto escuro. Foco com outline ciano de 2px.

Fatia glitch

Mesma prateleira