Skip to content

Make button styles more accurate #16

@Justin-CB

Description

@Justin-CB

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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions