How To Add Awesome CSS3 Google Style Button To your Blogger
Fast copy the html code from the below box
.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;}
>> Go to sing in Your Blogger Account
>> Go to blogger Dashboard >> Template
>> Edit the html on template
>> Backup your Template
]]></b:skin>
Just Above paste the html code
Now save the Template
and its done .
How to Implement
Now you need to add the style of the buttons. For that Create a new post and on the HTML mode, Select any of below html code for the button you want to appear to your blog post and paste it there. See the Preview.
<a href="#" class="PlusYellow">Google Yellow</a>
<a href="#" class="PlusRed">Google Red</a>
<a href="#" class="PlusBlue">Google Blue</a>
<a href="#" class="PlusGray">Google Gray</a>
Replace (#) With link URL
Don't Forget to like us on facebook
0 comments:
Post a Comment