Corte glitch

Corte glitch: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón glitch cyberpunk: esquinas cuadradas, casi negro #0a0a0f, borde de 1px rosa #f0abfc, texto rosa monoespaciado de 15px extra bold con 0.15em de tracking, padding de 14px por 30px. Al pasar el cursor aparecen dos copias de la etiqueta (desde data-text), una cian recortada al 40% superior y otra roja recortada al 40% inferior mediante polígonos clip-path, temblando unos píxeles en direcciones opuestas con animaciones en pasos de 0.5s. En active se invierte a relleno rosa con texto oscuro. Foco con outline cian de 2px.

Corte glitch

Misma estantería