Pure CSS3 Animated Download Button for Blogger

Posted On // 53 comments


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.

53 comments

Chatoor Author
17 June 2013 at 21:39

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

Reply
17 June 2013 at 21:41

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

Reply
25 June 2013 at 00:38


thank you so much

Reply
30 June 2013 at 09:13

Glad to help you. Keep Visiting

Reply
Anonymous Author
20 July 2013 at 12:52

Nice Widget !

Reply
30 July 2013 at 00:33

Nice One , Thanks :D

Reply
TP Softwares Author
30 July 2013 at 21:04

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

Reply
30 July 2013 at 21:28

awesome man
learning a lot from you

keep it up

Reply
4 August 2013 at 12:54

Thanks ! Keep Visiting my blog :)

Reply
Anonymous Author
30 August 2013 at 02:40

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

Reply
Anonymous Author
1 September 2013 at 18:41

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

Reply
10 September 2013 at 16:48

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

Reply
Pinky roi Author
16 September 2013 at 00:37

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

Reply
Abdullah Taha Author
18 September 2013 at 19:27

thaaaaaaaaaaaaaanks ^^

Reply
Rafay Ghafoor Author
20 September 2013 at 20:17

Cool Man Ty!

Reply
Rafay Ghafoor Author
21 September 2013 at 16:02

This one is so cool... just perfect

works perfect:-

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

Reply
Admin Author
22 September 2013 at 11:00

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

Reply
28 September 2013 at 08:06

How to make it responsive brother..

Reply
Tudo Site Author
28 September 2013 at 09:59

deu errado no meu

Reply
8 October 2013 at 21:30

nice ...

Reply
Dhruv Patel Author
10 October 2013 at 20:38

Thanks a lot buddy ♥ ♥

Reply
Anonymous Author
19 October 2013 at 23:12

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

Reply
26 October 2013 at 09:36

templet not geeting saved????

Reply
C Adam Author
18 November 2013 at 23:34

excellent

Reply
12 December 2013 at 09:07

Good one bro !!!! going to bookmark this site !!!

Reply
Anonymous Author
15 December 2013 at 22:32

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

Reply
Saqib Manzoor Author
5 January 2014 at 12:40

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

Reply
Rajesh Kota Author
5 January 2014 at 17:51

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

Reply
14 January 2014 at 21:06

Lovely <3 Thnx very Much

Reply
Gadget Guru Author
5 February 2014 at 21:04

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!

Reply
Admin Author
3 April 2014 at 09:17

thanks

Reply
Admin Author
3 April 2014 at 09:57

@gadget guru
you want to change the button color or text color

Reply
Aslam Parvez Author
5 May 2014 at 06:01

nice button ... :s

Reply
preloadedsoft Author
18 June 2014 at 10:20

error 404 what should i do?

Reply
21 October 2014 at 16:46

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

Reply
23 October 2014 at 19:51

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

Reply
esson Author
30 December 2014 at 06:23

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

Reply
12 February 2015 at 13:49

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.

Reply
Asif Rajpot Author
27 March 2015 at 11:43

How can we change the color of the button?

Reply
Yogesh Author
16 April 2015 at 14:15

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

Reply
Mark Mall Author
30 April 2015 at 02:01

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

Reply
Aruna Telshan Author
27 June 2015 at 21:50

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

Reply
Dolor Dota Author
15 November 2015 at 15:41

ty

Reply
xot nek Author
1 March 2016 at 10:23

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

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

Reply
Anonymous Author
12 April 2016 at 16:11

You have made a great site !

Reply
1 June 2016 at 06:55

thanks for nice download button. www.solveurpc.in

Reply
7 October 2016 at 23:07

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

Reply
Pdf Hindi.in Author
26 October 2016 at 10:14

Thanks..

Reply
3 November 2016 at 16:04

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

Reply
23 November 2016 at 07:57

Awesome work bhai.

Reply
Franktz Media Author
28 November 2016 at 02:30

THANKS
BE BLESSED

Reply
iram Author
8 March 2017 at 07:46

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

Reply
M I D Author
11 September 2017 at 18:20

thanks bro

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Pure CSS3 Animated Download Button for Blogger |