css - Button shakes on hover -

i'm having trouble while hovering buttons. seem shake when mouse not entirely on button.

i've made jsfiddle can see mean: http://jsfiddle.net/h93jkxck/

i've tried give min-height it's still shaking.

its because change position on hover, not hovered anymore... , looks "shaking"

try this:

.btn-social{    color: #000;    margin-top:0em;    position: relative;    padding-left: .75em;    padding-right: .75em;    font-size: .85em;  }  .hover-helper:hover{    padding-top: 1em;  }  div{    float:left;  }

<div class="hover-helper"><button class='btn-social'>facebook</button></div>  <div class="hover-helper"><button class='btn-social'>google</button></div>