CSS3 Awesome Animated Download Button For Blogger With Hover

Here is a detailed tutorial for pure css3 animated 'Download' button which you can use in your blogger blog/wordpress/any website. This tutorial was originally created by DesignShack. Here i will discuss to implement this button in blogger blog but you can download source file and implement it in your website.

Demo

Click here for Live Demo

Here We go...

Please make a backup of your template before proceeding.

Step 1: Go to Blogger Dashboard>Template>Select 'Expand Widget'

Step 2: Now Search for ]]></b:skin> and add this code above it.

/* --------------------------------------
Awesome CSS3 Download Button for Blogger
http://premium-stuff-guru.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: #222;
    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;
}

Step3: Now Use this code in your blogger posts wherever you want to display Download Button. Make sure to replace file size according to your file size.

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

Important Note:

There is a slightly problem with blogger post compose mode, you will notice that after using the code above you may not see the same result as shown in image or demo. That's because when you switch to compose mode from html mode, blogger breaks the HTML code into two lines. So it's solution is that when you paste above HTML code in HTML mode, don't switch to compose mode and publish the post.

What do you say?

I hope you will find this tutorial helpful. What do you say about this tutorial please don't forget to post your comments.