Tutorial: How to apply a custom google plus +1 share button

So I needed a custom google+1 button for a website I am developing.. But there wasn't any around! Sure there were custom buttons, icons etc, but no way to implement them. I searched on the interwebz for a tutorial on how to make a custom google +1 share button.


But then I decided I might as well just make it myself.


It was surprisingly easy to be honest, and because of the lack of tutorials out there, I thought I'd write a quicky!


So, How did I turn this:

Into this: 

Well when you see below you'll kick yourself if you haven't already, because it's so simple.


Step 1
Pour yourself a brew, Now this can be either Tea or Coffee dependent on your preference.

Step 2 
The HTML 

<div class="googleplus">
    <div class="googlehider">
        <g:plusone annotation="none"></g:plusone>
        
        <!-- Place this render call where appropriate -->
        <script type="text/javascript">
          window.___gcfg = {lang: 'en-GB'};
        
          (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>
    </div>
    <img src="images/googleplus.png" class="mygoogle" />
</div>

Step 3 
Next, you'll have to get your custom icon, this is the one we are going to replace the original google +1 icon with. (Here's some good ones: http://www.iconfinder.com/search/search/?q=google%20plus ) 
Make sure you name it googleplus.png and place it in your images folder.. - You may need to change the HTML above if your image is named or located elsewhere.


Step 4
The CSS
 

.googleplus {
 position:relative;
    /* - use this to position your share icon on your page -  */
}
.googlehider {
 opacity:0;
 height:30px;
 width:30px;
 position:absolute;
 top:0;
 left:0;
 z-index:3;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
}
.mygoogle {
 position:absolute;
 top:0;
 left:0;
 z-index:2;
 margin-left:6px;
}

Step 5 
Put it all together..

Step 6
Enjoy your freshly made brew.. it should still be warm ;-)

Walla! I hope this helps :-)