Bevel chrome

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

3dbevelchromeretro

CSS

.btn-056 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #1f2937;
  background: linear-gradient(180deg,#f9fafb,#d1d5db);
  border: 1px solid #6b7280;
  border-radius: 4px;
  padding: 11px 24px;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 #fff,inset -1px -1px 0 #9ca3af,0 2px 3px rgba(0,0,0,.2);
  transition: background .1s
}
.btn-056:hover {
  background: linear-gradient(180deg,#fff,#e5e7eb)
}
.btn-056:focus-visible {
  outline: 2px dotted #1f2937;
  outline-offset: 2px
}
.btn-056:active {
  background: linear-gradient(180deg,#d1d5db,#f3f4f6);
  box-shadow: inset 1px 1px 0 #9ca3af,inset -1px -1px 0 #fff
}

HTML

<button class="btn-056">Apply</button>

Prompt

A classic bevelled button: vertical gradient #f9fafb to #d1d5db, 1px #6b7280 border, 4px radius, 1px white inner highlight top-left and 1px #9ca3af inner shade bottom-right, small drop shadow, dark grey 14px semibold text, 11px by 24px padding. Hover brightens; active flips the gradient and swaps the bevel edges. Focus outline 2px dotted.

Bevel chrome

Same shelf