Papel em relevo

Papel em relevo: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

skeuomorphicembossedrectangleletterpresslight

CSS

.btn-128 {
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7280;
  text-shadow: 0 1px 0 #fff,0 -1px 0 #0002;
  background: #eeeeea;
  border: 0;
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff,inset 0 -2px 0 #d6d6d0,0 1px 3px #0002;
  transition: color .15s,box-shadow .15s
}
.btn-128:hover {
  color: #374151
}
.btn-128:focus-visible {
  outline: 2px solid #6b7280;
  outline-offset: 3px
}
.btn-128:active {
  box-shadow: inset 0 2px 4px #0002,inset 0 -1px 0 #fff;
  color: #111827
}

HTML

<button class="btn-128">Print</button>

Prompt

Um botão estilo letterpress sobre papel off-white #eeeeea: raio de 6px, texto cinza #6b7280 em caixa alta de 14px semibold com tracking de 0.05em que parece prensado na superfície (realce branco de 1px abaixo, sombra escura leve acima), padding de 13px por 26px, um realce inset branco de 1px no topo e uma borda inferior de 2px #d6d6d0, sombra externa leve de 3px. No hover o texto escurece para #374151; no active as sombras trocam de lugar para a face parecer afundada e o texto vai para #111827. Foco com outline cinza de 2px.

Papel em relevo

Mesma prateleira