yocontra / windows_98.css

some sick styles for your guestbook
http://contra.io/windows_98.css/
MIT License
797 stars 31 forks source link

Make button styles more accurate #16

Open Justin-CB opened 4 years ago

Justin-CB commented 4 years ago

I don't really use the stylesheet language that this project does, but I have HTML and CSS that imitates the default style of the button element in IE 4 on Windows 3.1x on a standard VGA display. The HTML is simply <button><span>Button Contents</span></button> The CSS is:

button {
width:auto;
border-top:2px outset #FFF;
border-left:2px outset #FFF;
border-bottom:2px outset #000;
border-right:2px outset #000;
color:#000;
background-color:#CBD1D2;
padding:3px 2px;
font-weight:800;
}
button:active {
border-top:2px inset #000;
border-left:2px inset #000;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
}
button:focus {
    outline:0;
}
button span {
    display:inline-block;
    border:1px solid #CBD1D2;/*Same color as button background*/
    -webkit-transform:scale(0.9,1.2); /* Safari and Chrome */
    -moz-transform:scale(0.9,1.2); /* Firefox */
    -ms-transform:scale(0.9,1.2); /* IE 9 */
    -o-transform:scale(0.9,1.2); /* Opera */
    transform:scale(0.9,1.2); /* W3C */
}
button:focus span {
    border:1px dotted #AAA;
}

Obviously, this displays more smoothly than the real browser, and is grayer than windows 95/98/NT 4/2000/ME(the windows 9x color scheme is more tan and I would probably have all 4 borders the same and just switch between inset and outset if I was simulating those versions of windows). The transform(s) and font-weight just make the default font look more like the default font in IE 4(it looks bolder, taller, and thinner than the standard fonts in modern browsers).

Justin-CB commented 4 years ago

To me, the current button style looks more like windows 3.x than windows 95-2000/ME. IE 4's buttons are actually shaped more like Windows 9x/NT 4/ME/2000 buttons. Windows 3.x's buttons actually have rounded corners and swap from beveled out to flat and shift down and right when they're clicked, but Windows 9x/NT 4/ME/2000's buttons have square corners and just swap from beveled out to beveled in when clicked.