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>
Google+ Green Google+ Blue Google+ Red Google+ Yellow Google+ Gray
