title: Trying to make a CSS button that grows on hover, with text remaining the same size
body: <p>Page with buttons here: <a href="http://teamcherry.com.au/jam-games/" rel="nofollow">http://teamcherry.com.au/jam-games/</a></p>
  
  <p>The effect I'm trying to achieve with the links on this page is that the button expands when hovered, with the text remaining the same size, and the text staying in the same position on the screen (so the button doesn't appear to 'move' when changing size).</p>
  
  <p>After researching for a while, I've managed to achieve the desired effect using the below css, which changes the padding an margin on hover using css transition:</p>
  
  <pre><code>a.btn {
      display: inline-block;
      background-color: #d11b34;
      color: #fff;
      text-decoration: none;
      font-size: 20px;
      padding: 10px;
      padding-right: 20px;
      padding-left: 20px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
          transition: all 0.3s ease 0s;
  }
  
  a.btn:hover {
      background-color: #a61529;
      padding: 15px;
      padding-right: 25px;
      padding-left: 25px;
      margin: -5px;
  }
  </code></pre>
  
  <p>This achieves the effect, but the effect is super jittery when animating in Chrome (and possibly other browsers) and the button seems to quiver when hovering.</p>
  
  <p>Is there another way to achieve this precise effect without animation jittering? Ideally in pure CSS but if JS or JQ is required then that's what I'll use.</p>