Trying to create a custom Google +1 button can be frustrating to say the least. I know it was for me. Unlike many other social share buttons, the Google +1 and Facebook share buttons generate an iframe that you cannot style, so you can’t simply change the image reference. (When creating a Google+ button, please keep in mind the Google+ Button Policy.)

Sometimes all you need to do is take a step back and reevaluate your approach. The technique described below is anything but conventional, but is a great trick to have up your sleeve. It will work on both iframes and dropdown boxes, depending on your needs. Surprisingly, it works in all major browsers (IE7/IE8/IE9, Firefox, Chrome and Safari). Yes, even IE7.

The Concept:

The main concept of this technique is to style around the target element and then make its contents invisible. By using opacity:0 instead of display:none you can manipulate the visibility while retaining its structure and functionality.

• Wrap the target content in a div. Apply CSS to this element to accommodate your custom button.
• Apply opacity:0 to the contents of that div.

The Code:

HTML

CSS

.GooglePlusWrapper {
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/MyCustomGooglePlusIcon.png) left top no-repeat; /*Edit to match your custom icon. If you prefer to use an  in the div you should remove this line.*/
}
.GooglePlusWrapper 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.*/
}
.GooglePlusWrapper {
!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.*/
}
.GooglePlusWrapper iframe {
opacity:0;
filter:alpha(opacity=0);
zoom:1;
}

And there you have it!

Hope this is helpful and saves you a couple bucks on broken keyboards, mice, monitors and counseling. :D