# Glitch-Slice (B 141)

Kategorie: Buttons  
Tags: cyberpunk, glitch, rectangle, clip-path, animated  
Seite: https://designforai.dev/de/snippet/btn-141

## Prompt

Ein Cyberpunk-Glitch-Button: eckige Ecken, fast schwarz #0a0a0f, 1px pinker Rahmen #f0abfc, Monospace 15px extra-bold pinker Text mit 0.15em Tracking, 14px mal 30px Padding. Beim Hover erscheinen zwei Kopien des Labels (aus data-text), eine cyan auf die oberen 40% und eine rot auf die unteren 40% per clip-path Polygonen beschnitten, die mit gestuften 0.5s Animationen ein paar Pixel in entgegengesetzte Richtungen zittern. Active invertiert auf pinke Füllung mit dunklem Text. Fokus 2px Cyan-Outline.

## HTML

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

## CSS

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