Keycap

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

3dpress-downkeyboardsquare

CSS

.btn-052 {
  font: 600 13px/1 system-ui,sans-serif;
  color: #374151;
  background: linear-gradient(180deg,#fff,#f3f4f6);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 #9ca3af,0 4px 6px rgba(0,0,0,.15);
  transition: transform .06s,box-shadow .06s
}
.btn-052:hover {
  background: #fff
}
.btn-052:focus-visible {
  outline: 2px solid #374151;
  outline-offset: 3px
}
.btn-052:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #9ca3af,0 1px 2px rgba(0,0,0,.15)
}

HTML

<button class="btn-052">Enter</button>

Prompt

A keyboard keycap button: white-to-#f3f4f6 vertical gradient, 1px #d1d5db border, 6px radius, grey text #374151 at 13px semibold, 10px by 18px padding, a 3px solid #9ca3af bottom edge and a small drop shadow. On press it travels 3px down and the edge disappears. Focus outline 2px grey.

Keycap

Same shelf