Best Animated Download Button for Blogger

Download Buttons are important for sites that offer files to download, And it's more cooler if they have an interactive download buttons. So this Animated download Button will surely make your visitors stay on your site because of an awesome download button. This is very light weight because this button has no image, Just  a pure Coding!

To see the DEMO for this download button I'm talking about, Click Below.

Animated Download Button Features:

• Light Weight
• Easy to Implement
• Easy to Edit

How to put Animated download button on Blogger:

• First thing to do is to copy the code Below and paste it just above: </body>

/*DOWNLOAD BUTTON tronicflow.blogspot.com*/
<style>
.tf-button {
    margin: 50px auto;
    width: 200px;
}
.tf-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.tf-button a, .tf-button p {
    -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);
}
.tf-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}
.tf-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.tf-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.tf-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.tf-button:active .up {
    margin: -20px 0 0 10px !important;
}
.tf-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>
/*DOWNLOAD BUTTON tronicflow.blogspot.com*/

• To implement the download button on your Blogger post, Just paste this code below on the HTML editor.

<div class="tf-button">
      <a href="#">Download</a>
      <p class="up">NAME OF FILE</p>
      <p class="down">555 GB .zip</p>
    </div>

Changing the Download text:

To change the text of the download button, Just follow the instructions below:

• Download- Is the name that you see on the download button. You can change this whatever text you want. Preview or anything.
• NAME OF FILE- Replace this text to the name of the File you want to be downloaded by your visitor.
• 555 GB .zip- You can change this and put the file size of the downloadable and its file format.

NOTE:

If you follow the steps above carefully. You will get no problems or errors from your Blogger Blog. But if you have any questions or suggestions for this widget. You can put your comments below.