Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make button styles more accurate #16

Open
Justin-CB opened this issue Nov 16, 2019 · 1 comment
Open

Make button styles more accurate #16

Justin-CB opened this issue Nov 16, 2019 · 1 comment

Comments

@Justin-CB
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant