HTML anchor and input buttons with same CSS style, but different dimensions

Question

So I have a basic button class that applies the same styling to various buttons across a site.

I have had to end up putting a form input, and an anchor tag next to each other, and their height and width is different. I have made the inner button text the same on each one just to show the differences like for like (obviously I dont need 2 'Add' buttons next to each other :P)

I dont want to specify the width, or the height in the CSS as the contents will change. Even the font looks slightly different sized, and from the box model it looks like the padding is alright.

http://jsfiddle.net/aeD4Z/2/

Markup

<form id="" method="POST" action="">
<input class="button" type="submit" name="submit" value="Add">
</form>

<a class="button" href="">Add</a>

CSS

.button {
    font-family: Arial;
    background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent;
    border: 1px solid #F07605;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 13px;
    outline: medium none;
    padding: 5px 8px !important;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}

EDIT: As you can see below it is not the padding, as the box models in firebug show the padding is the same for each one, so its something todo with the actual element itself

How do I get both to be the same dimensions from a single CSS class in my js fiddle above?

Answer 1

To fully equalize „button-ish“ <a> anchors, input and more recently button, it is a good idea, to synchronize their box-sizings:

input and button for historical reasons are still in quirks mode (resp. already in modern mode box-sizing: border-box) the rest is in box-sizing: content-box mode... (either way: gotta put in the same mode or compensate for equal heights by differenciating padding)

This is my standard “test”, when I start styling for a site:

__AA__
<button id='button'>plain Button</button>
<a class='button' href='#'>plain Anchor</a>
<a class='button'>linkless Anchor</a>
<input class='button' type='submit' value='Input Button' />
__BB__

this CSS (in stylus notation) is a good boilerplate:

button, a.button, input.button
    display inline-block
    font-size 12px
    font-weight bold

    color white
    font-family sans-serif
    text-decoration none
    background #24B345
    cursor pointer // also linkless (i.e. js) anchors/buttons should have that

    // important to equalize input/button vs. anchor:
    box-sizing content-box
    border 4px solid green
    padding 8px 10px
    margin 5px 4px 10px 0

    // some of this is default, 
    // but since input often gets styled elsewhere...
    vertical-align middle // a bit subject to taste 
    min-height 0 

    &:hover, &:focus // slight hover effect, resp. keyboard use (:focus)
         background: #44D365

Live on Codefork