CSS3 Awesome Animated Download Button For Blogger With Hover

Fast Copy the html code From the below Box
Go to blogger dashboard and edit html
Now find out ]]></b:skin> And paste the code above ]]></b:skin> tag

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

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;

}

Now use this code in your blogger post wherever you want to display Download button. make sure to replace file size according to your file size

1 2 3 4 5

<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>