Mam więc klasę przycisków, która stosuje tę samą stylizację do różnych przycisków w witrynie.

Musiałem skończyć umieszczając dane wejściowe formularza i umieszczając obok siebie znacznik zakotwiczenia, a ich wysokość i szerokość są różne. Uczyniłem wewnętrzny tekst przycisku tak samo na każdym z nich, aby pokazać różnice, jak na przykład (oczywiście nie potrzebuję 2 przycisków „Dodaj” obok siebie: P)

Nie chcę określać szerokości ani wysokości w CSS, ponieważ zawartość się zmieni. Nawet czcionka wygląda nieco inaczej, a z modelu pudełka wygląda, że ​​wyściółka jest w porządku.

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

Narzut

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

EDYTOWAĆ: Jak widać poniżej, nie jest to dopełnienie, ponieważ modele pudeł w firebug pokazują, że dopełnienie jest takie samo dla każdego z nich, więc jest to coś z samym faktycznym elementem

Jak uzyskać oba te same wymiary z pojedynczej klasy CSS w moim skrzydle js powyżej?