Question

Can anyone guess what CSS styling I should apply to a button to guess this exact look.

Note: I realize this is the default look for for unstyled buttons on Windows and that I don’t have to apply any CSS to get this style, but on Mac and Linux it’s not the same, so I can’t depend on the default styling of the OS for this. I would have to force this style myself in the css. Anyone knows what CSS styling can consistently produce this effect?

Answer 1

Examples

Firefox 3.6.12

Safari 5.0.3

Chrome 8

Internet Explorer 8

For some reason, IE8’s propriety filter property didn’t work (it should).

HTML

<button>
    <span>
       <span>
          Submit
       </span>   
    </span>
</button>

It seems to work better cross browser with 2 child elements. Using the button itself as the outer element caused a few issues.

CSS

button {
    background: none;
    border: none;
    padding: 0;   
}

button span {
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #999;
    padding: 0;
    background: #F0F0F0;
    background: -moz-linear-gradient(top,  #F0F0F0 50%, #D4D4D4 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#F0F0F0), color-stop(50%,#D4D4D4));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#D4D4D4',GradientType=0 );
}

button span span {
    border: 1px solid #fff;
    padding: 10px;
}

See it on jsFiddle.