The Google +1 Sprite Animation

How the +1 Button Works

Google +1 Button 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:

Google +1 Sprite

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.

Author: Zack Katz

Zack Katz is the creator of GravityView and the President of Katz Web Services. He lives in Denver with his wife and cute beast of a cat.

9 thoughts on “The Google +1 Sprite Animation”

  1. Thank you for sharing this. I’m fed up with companies ramming stuff down our throats- what happened to the concept of “personal space”?

    1. Exactly. The problem isn’t that it isn’t useful to certain people, but that it’s too IN YOUR FACE.
      And in defiance, I won’t be using it anytime soon.

  2. On latest Chrome on OSX you can put the CSS in this file: “/Users/francis/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css”

    No need to reload – it picks it up straight away (at least, in a new window).

  3. Firefox users:  Print and follow steps to turn off
    /disable/remove Google +1 Buttons from search results with or without AdBlock
    or AdBlock Plus:

     

     

    1) 
    Go to Firefox Profiles folder on your hard drive.   To locate your Firefox

         
    Profiles in Windows XP, Vista, 7, 
    press:

     

                     [Windows Key]+[R] → Type in
    (minus the quotes):   

     

                          
    “%APPDATA%MozillaFirefoxProfiles”   
    → click OK

     

     

                 or from the Taskbar click:

     

                      START  →  RUN  → Type in (minus the quotes):  

     

                           
    “%APPDATA%MozillaFirefoxProfiles”  
    → click OK

     

     

          
    The Profiles Folder will open.  
    There will probably be only one folder in the

          
    Profiles folder.

     

     

     

     

    2)  
    Open the folder with the 
    “.default”  extension
    name.

         

         

     

     

    3)  
    Look for a folder named Chrome in the .default folder.   If Chrome folder does

         
    not exist, you need to create it. 
    (If the Chrome folder exists, skip to #4).

     

             
    To create the Chrome folder:  

     

                   Right click inside the .default
    folder  → Select NEW FOLDER

                   → Type in (without the
    quotes):   “Chrome”

     

     

     

     

    4)  
    Open the Chrome folder and create a .text file named
    userContent.css. 

                (The contents of this file tells
    Firefox not to display +1 Buttons on

                  web pages.)  

     

                To create a text file named
    userContent.css:

     

                      Right click inside the Chrome
    folder  → Select NEW → TEXT

                      DOCUMENT → Type in (without
    the quotes):  userContent.css

     

     

           
    Windows will bring up “Rename” warning dialogue box that says:

     

                       If you change a file name
    extension, the file may become unusable.

                       Are you sure you want to
    change it?

                                                 Yes     No

                    

            
    Select  YES

     

             

     

     

     

    5)  
    Open userContent.css. 

            

             
    (It will open in Notepad with a box titled:  userContent.css – Notepad).

     

     

     

     

       

    6)  
    Paste the following into Notepad (minus the quotes):

     

                  ” .esw {
    display:none!important; } /* Hides the +1 Button completely */  ”

     

          
    Be sure to include the period (.) before “esw” in the above.

     

     

     

     

     

    7)  
    Save the Notepad file and Close it:  

     

              
    Select FILE → SAVE →  FILE → CLOSE
    (or select X on folder title bar

              
    to Close)

     

     

     

     

    8) 
    Close remaining open folders.

     

     

     

     

    9)  
    If Firefox Browser is not closed, close it.   Re-open Firefox Browser.  Navigate to Google’s

         
    search page and perform a search. 
    Google +1 Buttons will be gone from all future search

         
    results.

  4. Here’s how Firefox users can turn off
    /disable/remove Google +1 Buttons from search results with or without AdBlock
    or AdBlock Plus:

    1) 
    Go to Firefox Profiles folder on your hard drive.   To locate your Firefox

         
    Profiles in Windows XP, Vista, 7, 
    press:
         [Windows Key]+[R] → Type in
    (minus the quotes):  %APPDATA%MozillaFirefoxProfiles”   
    → click OK

        or from the Taskbar click:
        START  →  RUN  → Type in (minus the quotes): “%APPDATA%MozillaFirefoxProfiles”  
    → click OK 

       The Profiles Folder will open.  
    There will probably be only one folder in the Profiles folder.

     

    2)  
    Open the folder with the 
    “.default”  extension
    name.

     

    3)  
    Look for a folder named Chrome in the .default folder.   If Chrome folder doesnot exist, you need to create it. 
    (If the Chrome folder exists, skip to #4).To create the Chrome folder:  Right click inside the .default
    folder  → Select NEW FOLDER → Type in (without the
    quotes):   “Chrome”

     

    4)  
    Open the Chrome folder and create a .text file named
    userContent.css. The contents of this file tells
    Firefox not to display +1 Buttons on web pages.)  To create a text file named
    userContent.css:  Right click inside the Chrome
    folder  → Select NEW → TEXT DOCUMENT → Type in (without
    the quotes):  userContent.css
    Windows will bring up “Rename” warning dialogue box that says:  If you change a file name
    extension, the file may become unusable.  Are you sure you want to
    change it?   Yes     No                

    Select  YES

     

    5)  
    Open userContent.css. (It will open in Notepad with a box titled:  userContent.css – Notepad).

       

    6)  
    Paste the following into Notepad (minus the quotes):
             ” .esw {
    display:none!important; } /* Hides the +1 Button completely */  ”

         
    Be sure to include the period (.) before “esw” in the above.

     

    7)  
    Save the Notepad file and Close it:  Select FILE → SAVE →  FILE → CLOSE
    (or select X on folder title barto Close)

    8) 
    Close remaining open folders.

     

    9)  
    If Firefox Browser is not closed, close it.   Re-open Firefox Browser.  Navigate to Google’ssearch page and perform a search. 
    Google +1 Buttons will be gone from all future search 
    results.

Leave a Reply

Your email address will not be published. Required fields are marked *