Design for AI

Gris Win95

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

retrowin95bevelsystem

CSS
.btn-095 {
  font: 400 13px/1 system-ui,sans-serif;
  color: #000;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  padding: 8px 26px;
  min-width: 90px;
  cursor: default;
  box-shadow: inset -1px -1px 0 #000,inset 1px 1px 0 #fff,inset -2px -2px 0 #808080,inset 2px 2px 0 #dfdfdf
}
.btn-095:hover {
  background: #c8c8c8
}
.btn-095:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -5px
}
.btn-095:active {
  box-shadow: inset 1px 1px 0 #000,inset -1px -1px 0 #fff,inset 2px 2px 0 #808080,inset -2px -2px 0 #dfdfdf;
  padding: 9px 25px 7px 27px
}
HTML
<button class="btn-095">OK</button>
Prompt

Un botón clásico de sistema operativo de los años 90: gris plano #c0c0c0, esquinas cuadradas, "OK" negro regular de 13px, padding de 8px por 26px, ancho mínimo de 90px, con un bisel de dos pasos dibujado con sombras inset (blanco y #dfdfdf arriba a la izquierda, #808080 y negro abajo a la derecha). En active el bisel se invierte y el texto se desplaza 1px abajo a la derecha. El foco dibuja un rectángulo punteado de 1px dentro del botón. Cursor por defecto, sin transiciones.

Misma estantería