Pure CSS3 Animated Download Button for Blogger



Yesterday I was just randomly seeing   some Pure CSS3 buttons and fortunately I saw a cool animated download button made by Designshack.net. As I scrolled down I saw many comments by blogger users that this button was not working so I checked it out and made certain changes so that this download button can work in blogger too. This button is made up of Pure CSS3 i.e. without the usage of any Images or JavaScript. This button may be really helpful for game/software download blogs. So a live working demo of this button can be seen by clicking the below button. You will see the button at the end of the post.


Live Demo

Once you have seen the demo, to add this animated download button to your blog posts follow the below steps -



Adding the CSS in the Template


Go to Blog Title → Template → Edit HTML and search for the code </body> and paste the below given code just above </body>.


<style>

.abt-button {
    margin: 50px auto;
    width: 200px;
}

 /* Get this button at AllBloggerTricks.com */

.abt-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 */
}

.abt-button a, .abt-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);
}
.abt-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;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-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 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

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.

    <div class="abt-button">
      <a href="#">Download</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div>

After adding the HTML change # with the URL of the file to be downloaded. Change 1.2MB .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.

57 comments:

  1. nice tutorial :) hey do u have code for 404 image ??

    ReplyDelete
    Replies
    1. I will add it soon :) Thanks for appreciating my work.

      Delete
    2. Nice Widget !

      Delete
  2. mein aapki site ke bare mein kya bolu , galti se aapki site par aa giya aur ab pata chala kitni kaam ki site hai . thanks for it . keep it up..

    ReplyDelete
  3. awesome man
    learning a lot from you

    keep it up

    ReplyDelete
  4. thanks a lot keep it uppppppppppppp....... good blog

    ReplyDelete
  5. i want header and footer like your blog.. post tutorial about that thanks

    ReplyDelete
  6. Thank you so much , Now i'm using this excellent download button on my blog
    mixedmiscu.blogspot.com

    ReplyDelete
  7. just awesome bro .carry on ,I think your tips is so much different to others.after visiting your site I just love it.our web site Tutorial planet 24

    ReplyDelete
  8. This one is so cool... just perfect

    works perfect:-

    http://apkonfire.blogspot.com/2013/09/dont-fall-in-hole-v10-for-android.html

    ReplyDelete
  9. u r great but i wish the button hover and active left or right plz help me thanks advance

    ReplyDelete
  10. How to make it responsive brother..

    ReplyDelete
  11. Added this to all my blogs. It just give a true premium feeling. Thanks for sharing it

    ReplyDelete
  12. Good one bro !!!! going to bookmark this site !!!

    ReplyDelete
  13. its just work only 1 time :( ... but when page fully load. it wont work hovring

    ReplyDelete
  14. You are doing a great work brother,, keep it up..
    to dte free blogger templates, wordpress themes visit
    www.besttemplatesthemes.blogspot.com

    ReplyDelete
  15. Hey Thank u for the clear explanation.....
    i applied it on my site :)
    http://www.wallpaperpackz.com

    ReplyDelete
  16. Hey thanks so much for the revised version of the button. I had the same problem with the other one but the color of the text seems to want to stay blue instead of white. I tried changing it to black or something else but it's not changing. Any help would be appreciated. Thanks!

    ReplyDelete
    Replies
    1. @gadget guru
      you want to change the button color or text color

      Delete
  17. Thanks man! I use it in my post here! ^^
    http://webpapi.blogspot.com/2014/10/premium-theme-avada-wordpress-theme.html

    ReplyDelete
  18. Thanks allbloggertricks
    I used it this link post http://mbacou.blogspot.com/2014/10/business-powerpoint-template-part-2.html
    you can see my post as a LIVE DEMO

    ReplyDelete
  19. ha! you've just solve my 2 hour problem kudos mate

    ReplyDelete
  20. One of the finest of write-ups there is on the internet today. Kudos to the author for being so well informed. I must give it to their presence of mind and the selection of words. This couldn’t have been written in a much beautiful way. Keep it up. Good on you.

    ReplyDelete
  21. How can we change the color of the button?

    ReplyDelete
  22. Amazing!!
    I am adding this cool button on my Blog right now.
    Your work is really amaing!
    Thanks

    ReplyDelete
  23. How do I get in the middle on post? Blogger platform.

    ReplyDelete
  24. i want it left align. how to??????????? please

    ReplyDelete
  25. Yaay, It works. Thank you so much man. Cheers!

    Checked this out: http://brosfist.blogspot.com/

    ReplyDelete
  26. You have made a great site !

    ReplyDelete
  27. thanks for nice download button. www.solveurpc.in

    ReplyDelete
  28. Your website is amazing.
    Thanks,
    www.pdfhindi.in

    ReplyDelete
  29. I can't be do that.i used mobile so ...?

    ReplyDelete
  30. good one
    check it here
    http://aboutamount.blogspot.in

    ReplyDelete
  31. How to:
    1-change the text color ?
    2-change the button color ?

    ReplyDelete
  32. it doesnt work please help

    ReplyDelete
    Replies
    1. Hello tess it is working correctly. Where are you facing the problem?

      Delete
  33. not working I tried mulyiple times???? help

    ReplyDelete