How To Add Stylish CSS3 Push Buttons In Blogger

Previously, we shared Tech Shadow Blogger Template, Newsletter Email Subscription Widget and Socializer Widget but now we're back with another great thing which is CSS3 Push Buttons. 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 I've got these button from Medly Web 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!