Button rendering on Firefox

by Wray Bowling

HTML

<hr>
    
<input type="button" class="button" value="input button"/>
<a href="#" class="button">anchor</a>
<button class="button">button tag</button>
</div>

<hr>
    
<input type="bigger button" class="button" value="input button"/>
<a href="#" class="bigger button">anchor</a>
<button class="bigger button">button tag</button>

    <hr>

CSS

.button{
    display:inline-block;
    margin:1px 1px;
    border:solid 1px red;
    padding:1px 2px;
    
    background-color:#baddad;
    color:black;

    font-family:Helvetica,Arial,sans-serif;
    font-weight:normal;
    font-size:8pt;
    line-height:2.4em;
    
    height:auto;
    
    text-decoration:none;
    vertical-align: baseline;
}

::-moz-focus-inner{
    border:0;
    margin:0;
    padding:0;
}

.bigger{
    font-size:20pt;
}

hr{
    margin:1px 0;
}