Customize Google +1 button

If you don't have code given by the google plus yet,
get it here

https://developers.google.com/+/plugins/+1button/

You will get the code like this from them

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>




<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(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>

To customize the  button...

#1 CSS

 


.Wrapper {
display:block;
padding:0px;
margin:0px;
text-decoration:none;
border:none;
width:32px; /*adjust to the width of your icon*/
height:32px; /*adjust to the height of your icon*/
overflow:hidden;
background:url(images/customize_image.png) left top no-repeat; /*Edit to match your custom icon. If you prefer to use an <img> in the div you should remove this line.*/
}
.Wrapper div {
padding:4px 0px !important; /*the original button would have a height of 24px. Add padding to the top and bottom to align it vertically. If your custom icon is 24px tall or less you dont need this line.*/
}
.Wrapper {
!display:none; /*IE7 hack. If one day google decides to support IE7 you can remove this. I dont think you want to display something that doesnt work.*/
}
.Wrapper iframe {
opacity:0;
filter:alpha(opacity=0);
zoom:1;
}

  

#2 HTML

<div class="Wrapper">
<!-- google code goes here -->
</div>

*********************************************************************

This is the complete code.

Simply copy and paste it to the HTML or even PHP page. 

<style>

.Wrapper {
display:block;
padding:0px;
margin:0px;
text-decoration:none;
border:none;
width:32px; /*adjust to the width of your icon*/
height:32px; /*adjust to the height of your icon*/
overflow:hidden;
background:url(images/customize_googleplus.png) left top no-repeat; /*Edit to match your custom icon. If you prefer to use an <img> in the div you should remove this line.*/
}
.Wrapper div {
padding:4px 0px !important; /*the original button would have a height of 24px. Add padding to the top and bottom to align it vertically. If your custom icon is 24px tall or less you dont need this line.*/
}
.Wrapper {
!display:none; /*IE7 hack. If one day google decides to support IE7 you can remove this. I dont think you want to display something that doesnt work.*/
}
.Wrapper iframe {
opacity:0;
filter:alpha(opacity=0);
zoom:1;
}

</style>


<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(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 class="Wrapper">

    <!-- Place this tag where you want the +1 button to render. -->        <div class="g-plusone" data-annotation="inline" data-width="300"></div>

</div>