Bisel cromado

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

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

Un botón biselado clásico: degradado vertical de #f9fafb a #d1d5db, borde de 1px #6b7280, radio de 4px, brillo interior blanco de 1px arriba a la izquierda y sombra interior de 1px #9ca3af abajo a la derecha, sombra pequeña, texto gris oscuro de 14px semibold, padding de 11px por 24px. Al pasar el cursor se aclara; en active el degradado se invierte y los cantos del bisel se intercambian. Outline de foco de 2px punteado.

Bisel cromado

Misma estantería