title: HTML anchor and input buttons with same CSS style, but different dimensions
body: <p>So I have a basic button class that applies the same styling to various buttons across a site.</p>
  
  <p>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)</p>
  
  <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.</p>
  
  <p><a href="http://jsfiddle.net/aeD4Z/2/" rel="noreferrer">http://jsfiddle.net/aeD4Z/2/</a></p>
  
  <p>Markup</p>
  
  <pre><code>&lt;form id="" method="POST" action=""&gt;
  &lt;input class="button" type="submit" name="submit" value="Add"&gt;
  &lt;/form&gt;
  
  &lt;a class="button" href=""&gt;Add&lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong><em>EDIT:</strong> 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</em></p>
  
  <p><img src="https://i.stack.imgur.com/FFULR.gif" alt="Box model for input and anchor"></p>
  
  <p>How do I get both to be the same dimensions from a single CSS class in my js fiddle above?</p>