Awesome pure css3 premium Animated download button for blogger

Yesterday i was seeing a blog having an awesome download button,i thought to hack it
now i m going to share an awesome css button with hover effect.

Adding the CSS in the Template

• Login to Blogger >> Dashboard

• Template >> Edit Html

• Then search for ]]></b:skin> tag

• Paste bellow code just above ]]></b:skin> tag

/* --------------------------------------

Awesome CSS3 Download Button for Blogger

http://mybloggerskill.blogspot.com

------------------------------------------ */

.dlbutton {

margin: 150px auto;

width: 200px;

position: relative;

z-index: 1;

}

.dlbutton a {

display: block;

width: 200px;

height: 50px;

background: #00b7ea;

background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));

background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);

color: white;

text-align: center;

text-decoration: none;

text-transform: uppercase;

font: 17px/50px Helvetica, Verdana, sans-serif;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}

.dlbutton a, .slide {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

}

.slide {

position: absolute;

z-index: -1;

display: block;

margin: -50px 0 0 10px;

width: 180px;

height: 40px;

background: #7b7b7b;

color: #fff;

text-align: center;

font: 12px/45px Helvetica, Verdana, sans-serif;

-webkit-transition: margin 0.5s ease;

-moz-transition: margin 0.5s ease;

-ms-transition: margin 0.5s ease;

-o-transition: margin 0.5s ease;

transition: margin 0.5s ease;

}

.dlbutton:hover .bottom {

margin: -10px 0 0 10px;

}

.dlbutton:hover .top {

margin: -80px 0 0 10px;

line-height: 35px;

}

.dlbutton a:active {

background: #00b7ea;

background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));

background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}

.dlbutton:active .bottom {

margin: -20px 0 0 10px;

}

.dlbutton:active .top {

margin: -70px 0 0 10px;

}

#textwidget {

color: #666;

font-size: 0.925em;

font-style: italic;

line-height: 1.6em

}

a.tag {

color: #777;

font: 9px verdana;

text-transform: uppercase;

transition: border-color .218s;

background: #f4f4f4;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

display: inline-block;

text-shadow: 0 1px 0 #fff;

-webkit-transition: border-color .218s;

-moz-transition: border .218s;

-o-transition: border-color .218s;

transition: border-color .218s;

background: #f3f3f3;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

border: solid 1px #ccc;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

margin: 0 4px 4px 0;

padding: 3px 5px;

text-decoration: none

}

a.tag:hover {

color: #333;

border-color: #999;

-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

box-shadow: 0 1px 2px rgba(0,0,0,0.15)

}

a.tag:active {

color: #000;

border-color: #444

}

.slides {

font-size: 85%;

line-height: 130%;

overflow: hidden;

padding: 0;

margin: 30px 0 10px;

border-bottom: 1px solid #000

}

After adding the code save the template and follow the next step.

ADDING THE BUTTON

So as we have added the CSS we just need to add the HTML in the desired place. So whenever you want to add this button to your post just switch the post editor to HTML from Compose and add the below HTML Code.

<div class="dlbutton">
<a href="YOUR-LINK-HERE" target="_blank">Download</a>
<div class="slide top">
.zip</div>
<div class="slide bottom">
4.7 MB</div>
</div>

After adding the HTML Code change YOUR-LINK-HERE with the URL of the file to be downloaded. Change 4.7 MB & .zip  with the files size and extension.
You are done now. Now you and your visitors can see this awesome Pure CSS3 animated download button in your blog.

</div>