It looks like that's just the way the button was setup. If you go to this site, you'll see that's where the button is hosted. You'll notice it looks like three different buttons. That means it's a sprite and on certain activities by the mouse, it's showing a different part of the image. Just by taking a quick look I found this
media="all"
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
You'll notice in that code there are the transitions, that's part of what's making the effect happen. Also this is part of the code that is showing only a certain image, notice that background-position.
a.PIN_1392869101137_pin_it_button_20 {
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 0!important;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}
Now on the :hover notice where the background position is.
a.PIN_1392869101137_pin_it_button_20:hover {
background-position: 0 0px;
}
That change is what is causing the effect.