Today, I am giving you CSS3 coding based Google style button in 4 different color look with Hover effect. If you have some basic Knowledge of Css3 Coding then you can change color style easily. In this Procedure have 2 basic steps. One is add Css3 skin code in your templates and second is add HTML code in post to show Button in your post.
Lets Check The Demo Look of Button.
How To Add CSS3 Google style button To Blogger?
First Step:
- Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML)
- Find
Ctrl +F for the code below
]]></b:skin>
- Just above that paste the following code.
.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;
}
Second Step:
When you create New Post Paste the any one Style HTML code in Your HTML Mode.Select any of the below HTML code for the button you want to appear in your blog post and paste it there.
and Check in Preview Mode.
<a href="#" class="PlusYellow">Google Yellow</a>
<a href="#" class="PlusGray">Google Gray</a>
<a href="#" class="PlusBlue">Google Blue</a>
<a href="#" class="PlusRed">Google Red</a>
- Replace # with link URL
- Replace Google Blue, Google Red, Google Yellow, Google Gray with the text which you want to appear on the button.
No comments :
Post a Comment