# Borrado máquina de escribir (B 120)

Categoría: Botones  
Etiquetas: text-swap, typewriter, mono, steps, terminal  
Página: https://designforai.dev/es/snippet/btn-120

## Prompt

Un botón estilo terminal: texto monoespaciado de 14px #e2e8f0 sobre #0f172a con borde de 1px #334155, radio de 6px, padding de 12px por 18px, ancho mínimo de 130px, un prefijo verde "$ ". Al pasar el cursor el texto del comando se borra carácter a carácter (transición de max-width en pasos, 9 pasos) dejando un cursor parpadeante. Active #020617. Foco con outline verde de 2px y offset de 3px.

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