cssbutton.css

dabblet.css

/* cssbutton.css */
.yui3-button {
    -moz-transition: -moz-box-shadow 0.1s linear 0s;
    -moz-user-select: none;
    background-color: #E6E6E6;
    background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15) 40%, transparent);
    border: medium none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    padding: 0.4em 1em 0.45em;
    text-align: center;
    text-decoration: none;
    vertical-align: baseline;
    white-space: nowrap;
}

/* Imagine this is a some custom overrides */
.yui3-button{
	line-height:5em;
}

/* So do we have this, or not?  Remove it, and look at the difference between WebKit & Firefox */
input.yui3-button{
	line-height:normal !important;
}

dabblet.html

<br ><br ><br >
<h1>Firefox!!! *shakes fist*</h1>
<button class='yui3-button'>button</button>
<input type='button' class='yui3-button' value='input'>
<button>Unstyled button</button>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"all"}