Papel en relieve

Papel en relieve: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón estilo letterpress sobre papel blanco roto #eeeeea: radio de 6px, texto gris #6b7280 en mayúsculas de 14px semibold con 0.05em de tracking que parece hundido en la superficie (brillo blanco de 1px por debajo, sombra oscura tenue por encima), padding de 13px por 26px, un brillo inset blanco de 1px arriba y un labio de 2px #d6d6d0 abajo, sombra tenue de 3px. Al pasar el cursor el texto se oscurece a #374151; en active las sombras se intercambian para que la cara parezca hundida y el texto pasa a #111827. Foco con outline gris de 2px.

Papel en relieve

Misma estantería