Design for AICinza Win95
Cinza Win95: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Um botão clássico de sistema operacional dos anos 1990: cinza chapado #c0c0c0, cantos retos, "OK" em preto regular de 13px, padding de 8px por 26px, largura mínima de 90px, com um chanfro em dois degraus desenhado com sombras inset (branco e #dfdfdf no canto superior esquerdo, #808080 e preto no inferior direito). No active o chanfro inverte e o texto se desloca 1px para baixo e para a direita. O foco desenha um retângulo pontilhado de 1px dentro do botão. Cursor padrão, sem transições.