# Scanline-Sweep (B 143)

Kategorie: Buttons  
Tags: cyberpunk, scanline, rectangle, dark, animated  
Seite: https://designforai.dev/de/snippet/btn-143

## Prompt

Ein Retro-Terminal-Button: Dunkelgrün #052e16 mit 1px Rahmen #16a34a, 2px Radius, grüner #4ade80 Monospace 14px semibold Text mit 0.1em Tracking, 13px mal 28px Padding, zarte horizontale Scanlines (sich wiederholende 1px halbtransparente grüne Linien alle 3px). Ein halbtransparentes grünes Band fegt alle 2.2s von oben nach unten (overflow hidden). Hover hellt den Text mit Leuchten auf und beschleunigt den Sweep; active hellt die Basis auf #14532d. Fokus 2px grüne Outline.

## HTML

```html
<button class="btn-143">Scan</button>
```

## CSS

```css
.btn-143 {
  position: relative;
  overflow: hidden;
  font: 600 14px/1 ui-monospace,Menlo,monospace;
  letter-spacing: .1em;
  color: #4ade80;
  background: #052e16;
  border: 1px solid #16a34a;
  border-radius: 2px;
  padding: 13px 28px;
  cursor: pointer;
  background-image: repeating-linear-gradient(0deg,#0000 0 2px,#4ade8014 2px 3px);
  isolation: isolate;
  transition: color .2s
}
.btn-143::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(#4ade8000,#4ade8055);
  z-index: -1;
  animation: scan143 2.2s linear infinite
}
.btn-143:hover {
  color: #bbf7d0;
  text-shadow: 0 0 6px #4ade80
}
.btn-143:hover::after {
  animation-duration: .9s
}
.btn-143:focus-visible {
  outline: 2px solid #4ade80;
  outline-offset: 3px
}
.btn-143:active {
  background-color: #14532d
}
@keyframes scan143 {
  to {
    top: 140%
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-143, .btn-143 * { animation: none; transition: none; }
}
```