Google+ Style Save, Upload, Comment & Cancel Buttons


Best Movies Sites: TOP 10 MOVIE WEBSITES


Google plus style buttons
I have already shared Google+ widgets especially in case of buttons. But today in this post let me share about the entire Google+ buttons for your blog. There are four types of buttons with both different purposes like Save, Upload, Comment and Cancel. All have different look in colors as you see exactly in Google+. So I figured it was the perfect time to try and recreate probably one of the most noticeable element on the new social network.

You can see live demo of different colored Google plus buttons. Its a screenshot which I have taken from my demo blog. Just click on the below image and see the demo online and get an idea of what we are going to make here. (There is no images used at all. The widget is made with only in pure CSS3).



Google style buttons for blogger

question mark icon png How to get this buttons for blogger
download css3
We have to add both CSS3 part and HTML part to create this Google+ buttons for blogger. In my earlier posts I have had given the CSS3 part to create blogger button widget or other widgets. But this's a little bit different from others. 

What you have to do is just click on the Download Now button as you see in right side and download the whole CSS3 code of this Google+ buttons. (The CSS3 code will be in a .zip format. So extract it all and use).

Now let's see how to add the downloaded Google+ button skin to your blogger template. Let me tell you how to do do this. So please follow below steps carefully. 

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ¬
]]></b:skin>

Now add the downloaded CSS3 code just Above/Before the searched code.

Save your Template. Now we have added the CSS3 (style) part in the template and let's see how to use them. Next I m giving HTML Code of all types of button according to their names.


HTML section of the buttons

<div class="buttons">
   <button class="action bluebtn"><span class="label">Save</span></button>
   <button class="action redbtn"><span class="label">Upload</span></button>
   <button class="action greenbtn"><span class="label">Comment</span></button>
   <button class="action"><span class="label">Cancel</span></button>
 </div>

Also see: Google Style CSS3 Buttons With Small and Large in Size

Hope you like it. You are able to add this buttons anywhere in your blog. This Google+ buttons seems not good under in Internet Explorer. Happy blogging:)