CRT âmbar

CRT âmbar: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão estilo monitor CRT: preenchimento marrom bem escuro #1a1200, borda de 2px âmbar #fbbf24, raio de 2px, "INSERT COIN" em monoespaçada âmbar de 13px bold com espaçamento de 0.15em e um brilho âmbar suave no texto, um brilho âmbar interno e uma sobreposição de scanlines horizontais (linhas de 1px preto a 35% a cada 3px). No hover o brilho intensifica por dentro e por fora; no active inverte para âmbar sólido com texto escuro. Outline de foco de 2px âmbar tracejado.

CRT âmbar

Mesma prateleira