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 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.
And there you have it!
Hope this is helpful and saves you a couple bucks on broken keyboards, mice, monitors and counseling. :D