So today we’re going to add the stylish css3 push buttons in blogger which can make your blog more professional and beautiful. You can add these buttons in post area or anywhere you want. These are the quality, stylish, beautiful, unique and pure buttons that’s why I’m going to share this and so all the credit goes to them. Before we get into the tutorial about installing this in blogger first let me tell you something about this.
Stylish CSS3 Push Buttons
These are the unique and beautiful buttons which can be used as
DEMO, DOWNLOAD or any kind of button in blogger. These are build with
pure CSS3. We’ve two themes of this button which are red and blue. These
buttons have stylish background like these a placed in a hole. It also
has hover and active effect which makes this more unique. The developer
of these buttons has integrated the “OSWALD” font family which even more
beautify these buttons. Adding these buttons in blogger is not so
difficult, it is easy so let’s begin the tutorial.
Installing This In Blogger
- Go To Blogger >> Template >> Edit HTML
- Click Anywhere In The Coding To Active It
- Search For ]]></b:skin>
- Paste The Following Code Above ]]></b:skin>
<!– Start Push Button By Www.BloggerYard.Com –>
.push_button {
position: relative;
width:220px;
height:40px;
text-align:center;
color:#FFF;
text-decoration:none;
line-height:43px;
font-family:’Oswald’, Helvetica;
display: block;
margin: 30px;
}
.push_button:before {
background:#f0f0f0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
position: absolute;
content: “”;
left: -6px; right: -6px;
top: -6px; bottom: -10px;
z-index: -1;
}
.push_button:active {
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
top:5px;
}
.push_button:active:before{
top: -11px;
bottom: -5px;
content: “”;
}
.red {
text-shadow:-1px -1px 0 #A84155;
background: #D25068;
border:1px solid #D25068;
background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
background-image:-o-linear-gradient(top, #F66C7B, #D25068);
background-image:linear-gradient(to bottom, #F66C7B, #D25068);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}
.red:hover {
background: #F66C7B;
background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
background-image:-o-linear-gradient(top, #D25068, #F66C7B);
background-image:linear-gradient(top, #D25068, #F66C7B);
}
.blue {
text-shadow:-1px -1px 0 #2C7982;
background: #3EACBA;
border:1px solid #379AA4;
background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
background-image:linear-gradient(top, #48C6D4, #3EACBA);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}
.blue:hover {
background: #48C6D4;
background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
background-image:linear-gradient(top, #3EACBA, #48C6D4);
}
<!– End Push Button By Www.BloggerYard.Com –>
- Click “Save Template”
- Now You’ve Installed These Buttons In Your Blog. Let’s Jump To Next Step,
Adding This In Blogger
- Go To Blogger >> New Post >> HTML Tab
- Pick Up The Button From Below Code
- Paste It There In The HTML Tab.
Copy Below Code For Red Button :
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’>
<a href=”#” class=”push_button red”>Push the button</a>
Copy Below Code For Blue Button :
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’>
<a href=”#” class=”push_button blue”>Push the button</a>
- Now Complete Your Post and Hit “Publish” Button.
- You Can Also Check It In The Preview.
- CONGRATULATIONS! You’ve Successfully Got This Button In Your Blogger Blog!
Final Words
So friends, How was these buttons ? I hope these buttons will help
you in making your blog more beautiful and stylish. If you’re facing any
problem then feel free ask in the comments area. Have you more buttons?
Then do share it with us. Get in touch with us for more and leave your
feedbacks. Take Care. Happy Blogging!
Post a Comment