Bulletproof buttons

Original: http://jsfiddle.net/csswizardry/6mvaQ/

HTML

<input type=submit value=Go class=btn>
<button type=submit class=btn>Go</button>
<a href=# class=btn>Go</a>
<a href=# class="btn btn-secondary">Cancel</a>

<hr>

<input type=submit value=Go class="btn btn-sml">
<button type=submit class="btn btn-sml">Go</button>
<a href=# class="btn btn-sml">Go</a>
<a href=# class="btn btn-sml btn-secondary">Cancel</a>

<hr>

<input type=submit value=Go class="btn btn-lrg">
<button type=submit class="btn btn-lrg">Go</button>
<a href=# class="btn btn-lrg">Go</a>
<a href=# class="btn btn-lrg btn-secondary">Cancel</a>

CSS

html{
    font:1em/1.5 Georgia, serif;
    color:#666;
    background-color:#fff;
}

/* Buttons */
.btn{
    font:inherit;            /* Normalise fonts across <a>s and form buttons. */
    text-decoration:none;    /* Normalise hover behaviour. */
    cursor:pointer;          /* Normalise hover behaviour. */
    border:none;             /* Normalise border styles (or lack thereof). */
    line-height:1;           /* Remove line-height so we can size with padding. */
    display:inline-block;    /* Normalise display state. */
    margin:0;
    
    /* Cosmetics */
    padding:0.5em;           /* Set in ems so we can scale buttons up with font-size alone. */
    color:#fff;
    background-color:#ACE;
    border-radius:4px;
    -webkit-transition:0.2s;
       -moz-transition:0.2s;
            transition:0.2s;
}
    .btn:hover{
        background-color:#FAB;
    }

.btn-sml { font-size:.75em; }
.btn-lrg { font-size:1.5em; }

.btn-secondary,
.btn-secondary:hover{
    background:none;

}

JavaScript

/*
There is a lot of code here which deals with normalisation, getting a form input (e.g. <button>) to render the same as an <a>.
To see what does what, try deleting whole declarations.
*/