Jquery - Text Flickering while animate

Question

Im just making a simple menu with a simple jquery animation.

But when I move mouse over the button, the span element acts wierd. I have tried many variations, but no success. I want the span not to move while box is beeing resized.

If anyone help, I Would very appreciate that.

Thank you.

html:

<div id="wrapper">
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
    <a href="#" class="button"><span>Button</span></a>
<div>

css:

#wrapper {
    width: 1024px;
    margin: 50px auto;
    background: #ccc;
    display: inline-block;
    text-align: center;
}
.button {
    font: normal 18px/1em 'Arial';
    float: left;
    display: block;
    margin: 10px;
    background: #fff;
    padding: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /*text-indent: -9999px;*/
    position: relative;
    border: 1px solid #999;
    margin-bottom: 50px;
}
.button span {
    text-align: center;
    position: relative;
    top: 80px;
    left: 0;
    padding: 40px 0;
    display: inline-block;
    width: 100%;
}

jquery:

$(function(){
    $(".button").hover(
        function(){
            $(this).animate({'height':'+=20px', 'margin':'0px', 'width':'+=20px' }, 120);
        },
        function(){
             $(this).animate({'height':'-=20px', 'margin':'10px', 'width':'-=20px' }, 120);
        }
    );

});

jsfiddle

Answer 1

http://jsfiddle.net/sAW2c/364/

Here is an updated version. You were altering the position of the a element which contained the span, this means that the span would inherently move with the a element.

<ul id="wrapper">
    <li>
        <a href="#" class="button"></a>
        <span>Button</span>
    </li>
</ul>