Win95 Grau

Win95 Grau: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein klassischer Betriebssystem-Button der 1990er: flaches #c0c0c0 Grau, eckige Ecken, 13px regular schwarzes "OK", 8px mal 26px Padding, 90px Mindestbreite, mit einer zweistufigen Fase aus Inset-Schatten (Weiß und #dfdfdf oben links, #808080 und Schwarz unten rechts). Active kehrt die Fase um und rückt den Text 1px nach unten rechts. Fokus zeichnet ein 1px gepunktetes Rechteck im Button. Default-Cursor, keine Transitions.

Win95 Grau

Gleiches Regal