# Schreibmaschine löscht (B 120)

Kategorie: Buttons  
Tags: text-swap, typewriter, mono, steps, terminal  
Seite: https://designforai.dev/de/snippet/btn-120

## Prompt

Ein Button im Terminal-Stil: Monospace 14px #e2e8f0 Text auf #0f172a mit 1px Rahmen #334155, 6px Radius, 12px mal 18px Padding, Mindestbreite 130px, ein grünes "$ " Präfix. Beim Hover löscht sich der Befehlstext Zeichen für Zeichen (gestufte max-width Transition, 9 Steps) und lässt einen blinkenden Cursor zurück. Active #020617. Fokus 2px grüne Outline mit 3px Offset.

## HTML

```html
<button class="btn-120"><span>run build</span></button>
```

## CSS

```css
.btn-120 {
  font: 600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 12px 18px;
  cursor: pointer;
  text-align: left;
  min-width: 130px;
  transition: background .15s
}
.btn-120::before {
  content: "$ ";
  color: #22c55e
}
.btn-120 span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 9ch;
  border-right: 2px solid transparent;
  transition: max-width .5s steps(9,end)
}
.btn-120:hover span {
  max-width: 0;
  border-right-color: #e2e8f0;
  animation: blink120 .7s step-end infinite
}
.btn-120:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 3px
}
.btn-120:active {
  background: #020617
}
@keyframes blink120 {
  50% {
    border-right-color: transparent
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-120, .btn-120 * { animation: none; transition: none; }
}
```