Styling custom social network buttons

For awhile now I’ve been building the social bars at the end of articles/news by using the default buttons provided by your well known social networks (Google+, Facebook, Twitter etc.). This changed a few days ago – late enough, I admit – when I came accross an article (link) on creating your custom buttons by using the services URL. To be honest I had no clue about this but then again, I haven’t really looked into it that much.

google-plus-styling

All was nice and sweal until I wanted to add the button for Google’s oh-so-loved +1 service, which I have to admit I also use and love. Google Plus is the only network that doesn’t provide such an URL and from a designer’s point of view is really a kick in the… well, design let’s say. 🙂 The only button available is the one they provide and resizing it and hiding this and that is just not enough (Configuring the +1 button). I would definitely want to have the possibility to create my own button which integrates perfectly in the whole design of a web page.

The best solution I found, though still far from perfect, is to place another div on top of the button and hide the one underneath. You can check it out on Stack Overflow here.

If anyone found a solution to this issue or if I was too angry and missed something that would help with everything then feel free to share it.