Create Google Plus-Style Button using CSS3 in Blogger

With everyone talking about Google Plus recent site kick off, I figured it was the perfect time to try and recreate probably one of the most noticeable element on the new social network. Creating buttons with CSS is one of the most experimented-with web design techniques around. The trend in CSS button design seems to be eliminating the use of images, especially background images, from buttons. This emerging trend is mainly due to the recent breakthrough of CSS3. Buttons have now evolved in web designing, not just their appearance and effects but the way they are designed.

Read Also: How To Add Awesome Google Styled Button In Blogger

With my latest experimentation with CSS3 properties such gradients, box shadows, transitions etc… The result is this set of Google Style buttons created with CSS 3 (no images used at all).You can view a demo

Advantages of  creating buttons with css

There are many advantages to using CSS only ( without the use of image ) buttons for the following reasons :

No images need to be downloaded thus faster page loading .

Buttons expand to fit any length of text and it’s easy to alter the size, colour and effects.

By using CSS, it allows you to create button on the fly with just an anchor link. You only need to declare the appropriate class/id of the button in the stylesheet and assign it to the the anchor link.

How to use

1. Open Blogger –> Template –> Edit HTML.

2. Press Ctrl + F and search for ]]></b:skin> tag & add below code above it.

/*------------------------------------*\ RN Hckr Google Plus BUTTONS \*------------------------------------*/ button { text-decoration: none; text-shadow: 0 1px 0 #fff; font: bold 11px Helvetica, Arial, sans-serif; color: #444; line-height: 17px; height: 18px; display: inline-block; float: left; margin: 5px; padding: 5px 6px 4px 6px; background: #F3F3F3; border: solid 1px #D9D9D9; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-transition: border-color .20s; -moz-transition: border-color .20s; -o-transition: border-color .20s; transition: border-color .20s; height: 29px !important; cursor: pointer; } button:hover { background: #F4F4F4; border-color: #C0C0C0; color: #333; } button:active { border-color: #4D90FE; color: #4D90FE; -moz-box-shadow:inset 0 0 10px #D4D4D4; -webkit-box-shadow:inset 0 0 10px #D4D4D4; box-shadow:inset 0 0 10px #D4D4D4; } button.bluebtn { border: 1px solid #3079ED !important; background: #4B8DF8; background: -webkit-linear-gradient(top, #4C8FFD, #4787ED); background: -moz-linear-gradient(top, #4C8FFD, #4787ED); background: -ms-linear-gradient(top, #4C8FFD, #4787ED); background: -o-linear-gradient(top, #4C8FFD, #4787ED); -webkit-transition: border .20s; -moz-transition: border .20s; -o-transition: border .20s; transition: border .20s; } button.bluebtn:hover { border: 1px solid #2F5BB7 !important; background: #3F83F1; background: -webkit-linear-gradient(top, #4D90FE, #357AE8); background: -moz-linear-gradient(top, #4D90FE, #357AE8); background: -ms-linear-gradient(top, #4D90FE, #357AE8); background: -o-linear-gradient(top, #4D90FE, #357AE8); } button.greenbtn { border: 1px solid #29691D !important; background: #3A8E00; background: -webkit-linear-gradient(top, #3C9300, #398A00); background: -moz-linear-gradient(top, #3C9300, #398A00); background: -ms-linear-gradient(top, #3C9300, #398A00); background: -o-linear-gradient(top, #3C9300, #398A00); -webkit-transition: border .20s; -moz-transition: border .20s; -o-transition: border .20s; transition: border .20s; } button.greenbtn:hover { border: 1px solid #2D6200 !important; background: #3F83F1; background: -webkit-linear-gradient(top, #3C9300, #368200); background: -moz-linear-gradient(top, #3C9300, #368200); background: -ms-linear-gradient(top, #3C9300, #368200); background: -o-linear-gradient(top, #3C9300, #368200); } button.redbtn { border: 1px solid #D14836 !important; background: #D64937; background: -webkit-linear-gradient(top, #DC4A38, #D14836); background: -moz-linear-gradient(top, #DC4A38, #D14836); background: -ms-linear-gradient(top, #DC4A38, #D14836); background: -o-linear-gradient(top, #DC4A38, #D14836); -webkit-transition: border .20s; -moz-transition: border .20s; -o-transition: border .20s; transition: border .20s; } button.redbtn:hover { border: 1px solid #B0281A !important; background: #D14130; background: -webkit-linear-gradient(top, #DC4A38, #C53727); background: -moz-linear-gradient(top, #DC4A38, #C53727); background: -ms-linear-gradient(top, #DC4A38, #C53727); background: -o-linear-gradient(top, #DC4A38, #C53727); } button.action:hover { -moz-box-shadow: 0 1px 0px #DDD; -webkit-box-shadow: 0 1px 0px #DDD; box-shadow:iset 0 1px 0px #DDD; } button.action:active { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border-color: #C6C6C6 !important; } button.bluebtn:active { border-color: #2F5BB7 !important; } button.greenbtn:active { border-color: #2D6200 !important; } button.redbtn:active { border-color: #B0281A !important; } /*------------------------------------*\ $BUTTON LABEL \*------------------------------------*/ button span.label { display: inline-block; float: left; line-height: 17px; height: 18px; padding: 0 1px; overflow: hidden; color: #444; -webkit-transition: color .20s; -moz-transition: color .20s; -o-transition: color .20s; transition: color .20s; } button span.label { line-height: 15px !important; } button:hover .label.bluebtn { color: #7090C8; } button:hover .label.greenbtn { color: #42B449; } button:hover .label.yellow { color: #F7CB38; } button.bluebtn .label { color: #FFF !important; text-shadow: 0 1px 0 #2F5BB7 !important; } button.greenbtn .label { color: #FFF !important; text-shadow: 0 1px 0 #2D6200 !important; } button.redbtn .label { color: #FFF !important; text-shadow: 0 1px 0 #B0281A !important; } button.action .label { padding: 0 17px !important; } button.action:active .label { color: #333 !important; } button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label { color: #FFF !important; } .buttons { background: #F1F1F1; padding: 11px; border: 1px solid #D2D2D2; width: 843px; margin-bottom: 20px; } #container { text-align: left; background: #FFF; width: 865px; margin: 300px auto 0; padding: 20px; border-left: 1px solid #CCC; border-right: 1px solid #CCC; -moz-box-shadow: 0px 0px 10px #BBB; -webkit-box-shadow: 0px 0px 10px #BBB; box-shadow: 0px 0px 10px #BBB; } /*Footer css style is used in demo only*/ footer { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 5px 5px 5px 5px; bottom: 0; box-shadow: 0 3px 1px rgba(0, 0, 0, 0.02) inset, 0 1px 0 white; display: block; height: 40px; left: 0; padding: 1.5em; position: fixed; width: 100%; z-index: 100000; } footer h2 { color: rgba(0, 0, 0, 0.8); font-family: 'PT Sans Narrow',Arial,sans-serif; font-size: 20px; font-weight: normal; left: 50%; margin-left: -400px; position: absolute; text-shadow: 0 1px 0 white; width: 500px; } footer a.youhacked, a.youhacked:visited { font-family: "lucida grande",tahoma,verdana,arial,sans-serif; background: url("http://youhack.me/demo/Apple%20itunes%20banner%20rotator/youhack.png") no-repeat scroll right top transparent; border: medium none; color: #000000; font-size: 12px; height: 70px; left: 50%; letter-spacing: 1px; line-height: 31px; margin: 20px 0 0 110px; position: absolute; text-decoration: none; top: 0; width: 310px; }

3. There are 4 types of buttons, you just have to add the appropriate class name to the tag <button>.See example below :

<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>

The code above will result in the following buttons :

Use this Code where you want :)