Typewriter erase

Typewriter erase: a CSS button. Copy the rules, or the prompt that rebuilds it.

text-swaptypewritermonostepsterminal

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

HTML

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

Prompt

A terminal-style button: monospace 14px #e2e8f0 text on #0f172a with a 1px #334155 border, 6px radius, 12px by 18px padding, minimum width 130px, a green "$ " prefix. On hover the command text erases character by character (stepped max-width transition, 9 steps) leaving a blinking cursor. Active #020617. Focus 2px green outline offset 3px.

Typewriter erase

Same shelf