Âncora de HTML e botões de entrada com o mesmo estilo CSS, mas dimensões diferentes
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.
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?