Por lo tanto, tengo una clase de botones básicos que aplica el mismo estilo a varios botones en un sitio.

Tuve que terminar poniendo una entrada de formulario, y una etiqueta de ancla una al lado de la otra, y su altura y anchura son diferentes. He hecho que el texto del botón interno sea el mismo en cada uno solo para mostrar las diferencias como para me gusta (obviamente no necesito 2 botones 'Agregar' uno al lado del otro: P)

No quiero especificar el ancho o la altura en el CSS ya que los contenidos cambiarán. Incluso la fuente tiene un tamaño ligeramente diferente, y en el modelo de caja parece que el relleno está bien.

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

Margen

<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 puede ver a continuación, no es el relleno, ya que los modelos de caja en firebug muestran que el relleno es el mismo para cada uno, por lo que es algo con el propio elemento.

¿Cómo puedo lograr que ambas sean las mismas dimensiones de una sola clase de CSS en mi js fiddle anterior?