Design for AI

CRT ámbar

CRT ámbar: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

retroterminalamberscanlines

CSS
.btn-094 {
  position: relative;
  font: 700 13px/1 ui-monospace,Menlo,monospace;
  letter-spacing: .15em;
  color: #fbbf24;
  background: #1a1200;
  border: 2px solid #fbbf24;
  border-radius: 2px;
  padding: 12px 20px;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(251,191,36,.8);
  box-shadow: inset 0 0 12px rgba(251,191,36,.2);
  overflow: hidden;
  transition: box-shadow .15s
}
.btn-094::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.35) 2px 3px);
  pointer-events: none
}
.btn-094:hover {
  box-shadow: inset 0 0 18px rgba(251,191,36,.35),0 0 14px rgba(251,191,36,.4)
}
.btn-094:focus-visible {
  outline: 2px dashed #fbbf24;
  outline-offset: 3px
}
.btn-094:active {
  background: #fbbf24;
  color: #1a1200;
  text-shadow: none
}
HTML
<button class="btn-094">INSERT COIN</button>
Prompt

Un botón estilo monitor CRT: relleno marrón muy oscuro #1a1200, borde de 2px ámbar #fbbf24, radio de 2px, "INSERT COIN" monoespaciado ámbar de 13px en negrita con 0.15em de espaciado y un resplandor de texto ámbar suave, un resplandor interior ámbar y una superposición de líneas de barrido horizontales (líneas de 1px negras al 35% cada 3px). Al pasar el cursor el resplandor se intensifica por dentro y por fuera; en active se invierte a ámbar sólido con texto oscuro. Outline de foco de 2px ámbar discontinuo.

Misma estantería