Des boutons "épais" crossbrowser

dabblet.css

/**
 * Des boutons "épais" crossbrowser																	
 */
.button {
    background: #EEE;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.07));
    border: 1px solid #DDD;
    border-bottom: 3px solid #BBB;
    border-radius: 3px;
    box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.2),0 2px 2px -1px rgba(0,0,0,.6);
    color: #666;
    cursor: pointer;
    display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;
    font: 1em/1.2em Arial, sans-serif;
    outline: none;
    margin: 0;
    padding: .5em 1.25em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px #FFF;
    top: -2px;
}
.button:focus {
    border-bottom-width: 2px;
    top: -1px;
    color: #2AD;
}
.button:hover {
    background-color: #F4F4F4;
    box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 0 8px 1px rgba(255,255,255,.5),0 2px 2px -1px rgba(0,0,0,.6);
}
.button:active {
    border-bottom-width: 1px;
    box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.2),0 2px 2px -1px rgba(0,0,0,.6);
    color: #2AD;
    top: 0;
}
.button-set {
    padding-left: 1px;
}
.button-set .button {
    border-radius: 0;
    margin-left: -1px;
}
.button-set .button:first-child {
    border-radius: 3px 0 0 3px;
}
.button-set .button:last-child {
    border-radius: 0 3px 3px 0;
}

dabblet.html

<a href="#" class="button">link</a> <button class="button">button</button> <input type="submit" class="button" value="submit" />
<hr />
<span class="button-set">
    <a href="#" class="button">link</a><!--
    --><button class="button">button</button><!--
    --><input type="submit" class="button" value="submit" />
</span>

settings.json

{"view":"split","prefixfree":"1","page":"css"}