title: smooth button grow and button shrink animation on hover
body: <p>I am trying to make a fairly simple animation; on mouse over, the button will animate to be bigger. When not hovering, it will return to it's original size. However, whenever when I try this sample code, it warps the button to odd sizes</p>
  
  <pre><code>$('.btn').hover(function() {
      $(this).removeClass('btn-primary').addClass('btn-warning');
      $(this).stop().animate({
          'height': $(this).height() * 2,
          'width': $(this).width() * 1.3
      }, 300);
  }, function() {
      $(this).removeClass('btn-warning').addClass('btn-primary');
      $(this).stop().animate({
          height: $(this).height(),
          width: $(this).width()
      }, 300);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/RBLqY/1/" rel="nofollow">http://jsfiddle.net/RBLqY/1/</a></p>
  
  <p>how could this problem be solved?</p>