How the +1 Button Works
The +1 Button uses an advanced sprite technique to simulate an animated gif. The animation occurs when hovering over search results with +1 enabled, and the shine moves across the button. (The image to the right is an animated gif I made…)
The +1 Button is not an animated gif, however. It’s a sprite image that moves a background image across the “window” of the button using Javascript. The code, if you care, goes something like this:
onmouseover="window.gbar&&gbar.pw&&gbar.pw.hvr(this,google.time())"
The sprite image Google uses for the +1 button is below:
Pretty neat, huh?
Yeah, the +1 Button animation is pretty neat…
…now turn it off!
Oh goodness gracious, the animation is annoying. After hovering over one search result, it’s obvious how awful the animation is and I want to claw my eyes out with a rusty nail. I wanted to find a way to disable the animation.
Note: To use the code below, you must have a user stylesheet with the code shown added to the file. Here are links that will help you set it an user stylesheet: Safari, Internet Explorer, Firefox, Opera. Set that up, and then proceed below!
Disable the +1 Button Animation
.esws { background-position: -400px 0px!important; } /* Disables animation of the +1 button */
Hide the +1 Button
.esw { display:none!important; } /* Hides the +1 Button completely */
Improve the +1 Button
I want to use the +1 Button, so I’ve left it enabled. What I’ve done, however, is make the image lighter so it stands out less when you hover over a listing. When you hover over the button, it increases the brightness to 100%. It’s the best of both worlds:
/* Disabled the animation, makes the +1 button lighter yet full brightness on hover */
.esws, .eswh { background-position: -300px 0px!important; }
.eswh:hover { background-position: -400px 0px!important; }
I hope this helps people who love the +1 Button but hate the animation.
