Então eu tenho uma classe de botão básico que aplica o mesmo estilo a vários botões em um site.

Eu tive que acabar colocando uma entrada de formulário, e uma tag de âncora ao lado do outro, e sua altura e largura é diferente. Eu fiz o texto do botão interno o mesmo em cada um apenas para mostrar as diferenças como para like (obviamente eu não preciso de 2 'Adicionar' botões ao lado do outro: P)

Eu não quero especificar a largura, ou a altura no CSS como o conteúdo será alterado. Até mesmo a fonte parece um pouco diferente, e no modelo de caixa parece que o preenchimento é bom.

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

Marcação

<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;
}

EDITAR: Como você pode ver abaixo, não é o preenchimento, como os modelos de caixa no firebug mostram que o preenchimento é o mesmo para cada um, então é algo que se faz com o próprio elemento real

Como faço para obter ambas as mesmas dimensões de uma única classe CSS no meu violino js acima?