javascript - smooth button grow and button shrink animation on hover -

i trying make simple animation; on mouse over, button animate bigger. when not hovering, return it's original size. however, whenever when try sample code, warps button odd sizes

$('.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); }); 

http://jsfiddle.net/rblqy/1/

how problem solved?

i'm not entirely sure why code failing, seems have sort of calculation error when returning original size. after fiddling around bit found solution. animating padding instead of height , width don't have worry height width ratio when comes resizing link.

$('.btn').hover(function() {     $(this).removeclass('btn-primary').addclass('btn-warning');     $(this).stop().animate({         padding: '12px'     }, 300); }, function() {     $(this).removeclass('btn-warning').addclass('btn-primary');     $(this).stop().animate({         padding: '7px'     }, 300); }); 

jsfiddle

hope helps.