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