CSS3 Awesome Animated Download Button For Bloggger With Hover

515 loyal readers

RSS feed | E-mail

1058 followers

Follow us on Twitter!

260 followers

Join us on Facebook!

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.


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.

Windows Reloded, Get Latest Blogger widgets

/* --------------------------------------
Awesome CSS3 Download Button for Blogger
windowsreloded.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;
}

Windows Reloded, Get Latest Blogger widgets

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>

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.