Embossed paper

Embossed paper: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A letterpress-style button on off-white paper #eeeeea: 6px radius, uppercase 14px semibold grey #6b7280 text with 0.05em tracking that looks pressed into the surface (1px white highlight below, faint dark shadow above), 13px by 26px padding, a 1px white inset highlight at the top and a 2px #d6d6d0 lip at the bottom, faint 3px drop shadow. Hover darkens the text to #374151; active swaps the shadows so the face looks pushed in and text goes #111827. Focus 2px grey outline.

Embossed paper

Same shelf