Google Style CSS3 Buttons

We all love Google and all of it's content and buttons are one of it.You can use these buttons on your html documents , blogger , wordpress and all html/css supported services , Let's start with CSS :

• Go To Blogger > Template > Edit HTML > Paste following CSS just above ]]></b:skin> :

.buttons {
    float: left;
    padding-bottom: 20px;
    clear: both;
}
a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
a.button:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.button:active {
    color: #000;
    border-color: #444;
}
a.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
a.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.middle:hover,
a.right:hover { border-left: solid 1px #999 }
a.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.big {
    font-size: 16px;
    padding: 10px 15px;
}
a.supersize {
    font-size: 20px;
    padding: 15px 20px;
}

How To Add :

These buttons are available in two sizes normal and big :

Normal :

<a href="#" class="button">Stand Alone</a>
<a href="#" class="button left">Left</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button right">Right</a>
<a href="#" class="button">Stand Alone</a>

Big :

<a href="#" class="button big">Stand Alone</a>
<a href="#" class="button left big">Left</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button right big">Right</a>
<a href="#" class="button big">Stand Alone</a>

That's it.....

Google Plus CSS3 Buttons

Google Plus buttons really looks nice in all type of documents and blogs. So today i'am gonna give you about five cool Google Plus buttons for your blog and documents.

• Go To Blogger > Template > Edit HTML 

• And post below CSS above ]]></b:skin> :

• And also you can use it in html documents and wordpress

<style>
.PlusGreen {
    display: inline-block;
    background: #45ad45;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#47af47), color-stop(100%,#43ab43));
    background: -moz-linear-gradient(center top, #47af47 0%, #43ab43 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218ss 0;
    -moz-transition: background-color .218ss 0;
    -o-transition: background-color .218ss 0;
    transition: background-color .218ss 0;
    text-shadow: 1px 0px 0px #1a8f1a;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #1a8f1a;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusGreen:hover {
    background: #33a833;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #284c28;
    border-color: #284c28;
}
.PlusGreen:active {
    background: #359c35;
    -webkit-box-shadow: 1px 1px 3px #329432 inset;
    -moz-box-shadow: 1px 1px 3px #329432 inset;
    box-shadow: 1px 1px 3px #329432 inset;
    border-color: #2d4d2d;
}

.PlusYellow {
    display: inline-block;
    background: #fbfb00;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFD22), color-stop(100%,#f9f911));
    background: -moz-linear-gradient(center top, #FCFD22 0%, #f9f911 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 0px #FFFFF;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #e4e416;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusYellow:hover {
    background: #ffff19;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #ffe01a;
    border-color: #ffe01a;
    color: #333;
}
.PlusYellow:active {
    color: #000;
}
.PlusGray {
    display: inline-block;
    background: #f3f3f3;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f1f1f1));
    background: -moz-linear-gradient(center top, #f5f5f5 0%, #f1f1f1 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 1px 0px #ffffff;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    text-decoration: none;
    border-color: #DCDCDC;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusGray:hover {
    -webkit-box-shadow: 0px 2px #00002;
    -moz-box-shadow: 0px 2px #00002;
    box-shadow: 0px 2px #00002;
    border-color: #999;
    color: #333;
}
.PlusGray:active {
    -webkit-box-shadow: 1px 1px 3px #dedede inset;
    -moz-box-shadow: 1px 1px 3px #dedede inset;
    box-shadow: 1px 1px 3px #dedede inset;
    border-color: #444;
    color: #000;
}
.PlusBlue {
    display: inline-block;
    background: #3079ed;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327BEF), color-stop(100%,#2E77EB));
    background: -moz-linear-gradient(center top, #327BEF 0%, #2E77EB 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 0px 0px #1a378e;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #0066cc;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusBlue:hover {
    background: #2D71EE;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #291f93;
}
.PlusBlue:active {
    background: #2A69EF;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327aef), color-stop(100%,#2e76eb));
    background: -moz-linear-gradient(center top, #327aef 0%, #2e76eb 100%);
    -webkit-box-shadow: 1px 1px 3px 0px #0066cc inset;
    -moz-box-shadow: 1px 1px 3px 0px #0066cc inset;
    box-shadow: 1px 1px 3px 0px #0066cc inset;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #444444;
}
.PlusRed {
    display: inline-block;
    text-decoration: none;
    background: #eb3232;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FC2222), color-stop(100%,#F81111));
    background: -moz-linear-gradient(center top, #FC2222 0%, #F81111 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218s 0;
    -moz-transition: background-color .218s 0;
    -o-transition: background-color .218s 0;
    transition: background-color .218s 0;
    text-shadow: 1px 1px 0px #a60000;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #cc0000;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusRed:hover {
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 1px #a60000;
    border-color: #912020;
}
.PlusRed:active {
    background: #ed2b2b;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3232), color-stop(100%,#eb2f2f));
    background: -moz-linear-gradient(center top, #ed3232 0%, #eb2f2f 100%);
    -webkit-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    -moz-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    border-color: #ad4b4b;
}
</style>

How To Add Buttons :

• Go To Blogger > New Post > HTML 

• Paste following html

<a href="#" class="PlusGreen">Google+ Green</a>
<a href="#" class="PlusBlue">Google+ Blue</a>
<a href="#" class="PlusRed">Google+ Red</a>
<a href="#" class="PlusYellow">Google+ Yellow</a>
<a href="#" class="PlusGray">Google+ Gray</a>

It'll look like this :

  Google+ Green Google+ Blue Google+ Red Google+ Yellow Google+ Gray

10 Amazing CSS3 Buttons

I hand picked ten amazing CSS3 buttons from net which are totally cool and easy to user just like all my other tutorials. By the way because of my template you'll see all button font in orange color which is not their real color but they are just like you can see in above pic.

Button #1 :
Paypal

HTML :

<a href="#" Class="buttonPaypal" >Paypal</a>

CSS :

.buttonPaypal {
    display: inline-block;
    background: #fedc9a;
    -webkit-box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
    -moz-box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
    box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 1px 1px 1px #ffffff;
    padding: 5px 20px;
    margin: 5px 5px;
    border-color: #ffab2b;
    border-width: 1px;
    border-style: solid;
    text-align: center;
    font-size: 14px;
    color: #003366;
    font-weight: bold;
    text-decoration: none;
}

Button #2 :Fast
HTML :

<a href="#" Class="buttonFast" >Fast</a>

CSS :

.buttonFast {
    display: inline-block;
    background: #EEEEEE;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#697680), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717));
    background: -moz-linear-gradient(center top, #697680 0%, #3d3d3d 50%, #292929 50%, #171717 100%);
    -webkit-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
    -moz-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
    box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
    -webkit-border-radius: 28px 8px 28px 8px;
    -moz-border-radius: 28px 8px 28px 8px;
    border-radius: 28px 8px 28px 8px;
    padding: 0px 20px;
    display: block;
    border-color: #000000;
    text-decoration: none;
    border-width: 1px;
    width:50px;
    border-style: solid;
    text-align: center;
    font-family: Lucida Grande;
    font-size: 14px;
    line-height: 34px;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
}
.buttonFast:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffae24), color-stop(50%,#ff7600), color-stop(50%,#ff6900), color-stop(100%,#ff7600));
    background: -moz-linear-gradient(center top, #ffae24 0%, #ff7600 50%, #ff6900 50%, #ff7600 100%);
    -webkit-box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
    -moz-box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
    box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
    text-shadow: 0px 0px 3px #ffeedd;
    border-color: #8a0000;
}
.buttonFast:active {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd213), color-stop(100%,#ffef24));
    background: -moz-linear-gradient(center top, #ffd213 0%, #ffef24 100%);
    -webkit-box-shadow: 0px 1px 3px 0px #d2b400 inset;
    -moz-box-shadow: 0px 1px 3px 0px #d2b400 inset;
    box-shadow: 0px 1px 3px 0px #d2b400 inset;
    text-shadow: 1px 1px 2px #ae7600;
    border-color: #a17600;
    line-height: 33px;
    color: #ffffd2;
}

Button #3 :
Tweet Button

HTML :

<a href="#" Class="buttonTweet" >Tweet Button</a>

CSS :

.buttonTweet {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#d6e7f0));
    background: -moz-linear-gradient(center top, #FFFFFF 0%, #d6e7f0 100%);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px #FFFFFF;
    padding: 0px 8px;
    border-color: #a4cce5;
    border-width: 1px;
    border-style: solid;
    font-size: 14px;
    color: #186487;
    font-weight: bold;
    text-decoration: none;
}
.buttonTweet:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f8fc), color-stop(100%,#c1e0ed));
    background: -moz-linear-gradient(center top, #f2f8fc 0%, #c1e0ed 100%);
    border-color: #53a3d6;
    color: #133e58;
}
.buttonTweet:active {
    background: #cee5f4;
    text-shadow: 1px 1px 0px #e5f0f7;
    border-color: #7ab8df;
    color: #658a9d;
}

Button #4 :
Select An iPhone

HTML :

<a href="#" Class="buttonApple" >Select An iPhone</a>

CSS :

.buttonApple {
   background-color: rgba(18,127,210,1);
   background-image: -webkit-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   background-image:         linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
   -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
      -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
           box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
   border: solid 1px rgba(3,94,163,1);
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
   width: 210px;
   display: inline-block;
   font-size: 16px;
   text-decoration: none;
   line-height: 40px;
   text-align: center;
   color: rgba(255,255,255,1);
   text-shadow: 0px 1px 1px rgba(0,0,0,0.33)
}
.buttonApple:hover {
   background-image: -webkit-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   background-image:         linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
   -webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
      -moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
           box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
   border: solid 1px rgba(0,52,129,1);
}
.buttonApple:active {
   background-image: none;
   -webkit-box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
      -moz-box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
           box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
   border: solid 1px rgba(0,70,131,1);
}

Button #5 :

Get This App

HTML :

<a href="#" Class="buttonApp" >Get This App</a>

CSS :

.buttonApp {
   background-image: -webkit-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   background-image:         linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
   -webkit-box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
      -moz-box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
           box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
   border: solid 1px rgba(9,81,126,1);
   -webkit-border-radius: 26px;
      -moz-border-radius: 26px;
           border-radius: 26px;
   width: 220px;
   display: inline-block;
   font-size: 21px;
   line-height: 50px;
   text-decoration: none;
   text-align: center;
   color: rgba(255,255,255,1);
   font-weight: bold;
   text-shadow: 0px -1px 0px rgba(0,0,0,0.66)
}
.buttonApp:hover {
   background-image: -webkit-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
   background-image:         linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
}
.buttonApp:active {
   -webkit-transform: translateY(1px);
      -moz-transform: translateY(1px);
           transform: translateY(1px);
}

Button #6 :

Download (1.2MB)

HTML :

<a href="#" Class="buttonDownload" >Download (1.2MB)</a>

CSS :

.buttonDownload {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc930), color-stop(100%,#ffa403));
    background: -moz-linear-gradient(center top, #ffc930 0%, #ffa403 100%);
    -webkit-box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
    -moz-box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
    box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px #b27b0d;
    padding: 11px 15px;
    border-color: #e39304;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}
.buttonDownload:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd766), color-stop(100%,#ffa403));
    background: -moz-linear-gradient(center top, #ffd766 0%, #ffa403 100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.buttonDownload:active {
    -webkit-box-shadow: 1px 1px 1px 1px #ffa403 inset;
    -moz-box-shadow: 1px 1px 1px 1px #ffa403 inset;
    box-shadow: 1px 1px 1px 1px #ffa403 inset;
}

Button #7 :

Upload

HTML :

<a href="#" Class="buttonUpload" >Upload</a>

CSS :

.buttonUpload {
   background-color: rgba(76,168,0,1);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoE2_FwE3L2aGnVjbl0PWXFJ72txaD-sHokVh9SZSKeteklCb6Am3B710no2t3aRtyj4HjcDPAS8dCzRTblo5gqp8GAYv9QL_xHTKdUAXERTUuV_BpS0AAeYyW4P0VkELsQyDwSrFr7E/s1600/upload.png');
   background-repeat: no-repeat;
   background-position: 106px 7px;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
      -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
           box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
   border: solid 1px rgba(76,168,0,1);
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
   width: 119px;
   padding: 6px;
   display: inline-block;
   font-size: 13px;
   text-indent: 3px;
   text-decoration: none;
   text-align: left;
   color: rgba(255,255,255,1);
}
.buttonUpload:hover {
   background-color: rgba(69,145,3,1);
}
.buttonUpload:active {
   background-color: rgba(83,176,2,1);
}

Button #8 :
Bookmark Us

HTML :

<a href="#" Class="buttonBookmark" >Bookmark Us</a>

CSS :

.buttonBookmark {
   background-color: rgba(217,24,17,1);
   background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bMKDQldMMz9EN7dDKDtAembfsaNLGOZg0CAQQvuNpQ7qnVMF1oRVvIIhPq9npTFH20v1Y9DhOmBcUrUgR74oHqO5u7EAlazu2_IqmohCQcepPM9YR8OCGk9ayt76iLvL2trd1qwaoqU/s1600/bookmark.png');
   background-repeat: no-repeat;
   background-position: 106px 7px;
   -webkit-box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
      -moz-box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
           box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
   border: solid 1px rgba(214,0,0,1);
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
   width: 119px;
   padding: 6px;
   display: inline-block;
   font-size: 13px;
   text-decoration: none;
   text-indent: 3px;
   text-align: left;
   color: rgba(255,255,255,1);
}
.buttonBookmark:hover {
   background-color: rgba(212,11,11,1);
}
.buttonBookmark:active {
   background-color: rgba(255,18,18,1);
}

Button #9 :

Push

HTML :

<a href="#" Class="buttonPush" >Push</a>

CSS : 

.buttonPush {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80000), color-stop(100%,#9c0000));
    background: -moz-linear-gradient(center top, #e80000 0%, #9c0000 100%);
    -webkit-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -moz-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    text-shadow: 1px 1px 0px #242424;
    text-align: center;
    font-family: 'K', Sans-serif;
    font-size: 40px;
    line-height: 150px;
    text-decoration: none;
    color: #ffffff;
    width: 150px;
}
.buttonPush:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#9c0000));
    background: -moz-linear-gradient(center top, #ff0000 0%, #9c0000 100%);
    font-size: 44px;
}
.buttonPush:active {
    -webkit-box-shadow: 0px 2px 0px 0px #6e006e;
    -moz-box-shadow: 0px 2px 0px 0px #6e006e;
    box-shadow: 0px 2px 0px 0px #6e006e;
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px);
}

Button #10 :

Happy

HTML :

<a href="#" Class="buttonHappy" >Happy</a>

CSS :

.buttonHappy {
    display: inline-block;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f48f4c), color-stop(100%,#ef7d31));
    background: -moz-linear-gradient(center top, #f48f4c 0%, #ef7d31 100%);
    -webkit-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -moz-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    text-shadow: 1px 1px 0px #242424;
    text-align: center;
    text-decoration: none;
    font-family: 'K', Sans-serif;
    font-size: 40px;
    line-height: 150px;
    color: #ffffff;
    width: 150px;
}
.buttonHappy:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79b5e), color-stop(100%,#ef7d31));
    background: -moz-linear-gradient(center top, #f79b5e 0%, #ef7d31 100%);
    font-size: 44px;
}
.buttonHappy:active {
    -webkit-box-shadow: 0px 2px 0px 0px #6e006e;
    -moz-box-shadow: 0px 2px 0px 0px #6e006e;
    box-shadow: 0px 2px 0px 0px #6e006e;
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px);
}

CSS3 Animated Bubble Buttons

First of all you can also use these buttons on your html documents ..... just wanted to let you know :).....so all blogger right now i'am gonna tell you how to use these button on your blog and these are animated so have fun.....

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin> in your template

• Post the following CSS Code just above  ]]></b:skin>  :

.button{
font:15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
/* The following two rules are fallbacks, in case
  the browser does not support multiple backgrounds. */
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png');
/* Multiple backgrounds version. The background images
  are defined individually in color classes */
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
/* Applying a default border raidus of 8px */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/* A 1px highlight inside of the button */
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
/* The first rule is a fallback, in case the browser
  does not support multiple backgrounds
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
/* Moving the button 1px to the bottom when clicked */
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

/* Defining four button colors */

/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important; background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important; background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important; background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

• Save Your Template : )

How To Use These Button :

• While editing post click on Edit HTML tab

• Choose your button code below and paste it

• Replace links and link names with yours,

1. HTML Code Large Buttons :

<a href="#" class="button big blue">Big Button</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>

2. HTML Code Medium Buttons :

<a href="#" class="button blue medium">Medium Button</a>
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>

3. HTML Code Small Buttons :

<a href="#" class="button small blue">Small Button</a>
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>

4. HTML Code Round Buttons :

<a href="#" class="button big green rounded">Rounded</a>
<a href="#" class="button small blue rounded">Rounded</a>

• Replace # with link URL

That's It Comment To Join The Dark Side :p

Cool CSS3 Buttons For Blogger

First of all you can also use these buttons on your html documents ..... just wanted to let you know :).....so all blogger right now i'am gonna tell you how to use these button on your blog.....

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin> in your template

• Post the following CSS Code just above  ]]></b:skin>  :

.button, .button:visited {
 background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewoAg3lsQg5SmchY9vK8pBm4LQJre7b0CLQT4cdh72tqOAVFwBifdsYjQEBcoMTuodgCtVxCyd_wZQrqm3vjkDjcjs0SzWK-qcEcspJJuPYunC77n09cVx4hFsijQknzmEixKfmLUDuI/s1600/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}
.button:hover {
 background-color: #111;
 color: #fff;
}
.button:active {
 top: 1px;
}
.small.button, .small.button:visited {
 font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
 background-color: #e22092;
}
.pink.button:hover {
 background-color: #c81e82;
}
.green.button, .green.button:visited {
 background-color: #91bd09;
}
.green.button:hover {
 background-color: #749a02;
}
.red.button, .red.button:visited {
 background-color: #e62727;
}
.red.button:hover {
 background-color: #cf2525;
}
.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}
.orange.button:hover {
 background-color: #d45500;
}
.blue.button, .blue.button:visited {
 background-color: #2981e4;
}
.blue.button:hover {
 background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}
.yellow.button:hover {
 background-color: #fc9200;
}

• Save Your Template : )

How To Use These Button :

• While editing post click on Edit HTML tab

• Choose your button code below and paste it

• Replace links and link names with yours,

1. HTML Code Large Buttons :

<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>

2. HTML Code Medium Buttons :

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>
<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

• Replace LINK HERE with link URL

• Replace LINK TEXT HERE with the text which you want to appear on the button. 

That's IT!