Design for AI

Tecla de teclado

Tecla de teclado: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón tipo tecla de teclado: degradado vertical de blanco a #f3f4f6, borde de 1px #d1d5db, radio de 6px, texto gris #374151 de 13px semibold, padding de 10px por 18px, un canto inferior sólido de 3px #9ca3af y una sombra pequeña. Al pulsar baja 3px y el canto desaparece. Outline de foco de 2px gris.

Misma estantería