Adding Animated Download Button To Blogger Posts

Made By: Designshack Edited By: Yudhvir Singh Ahlawat This button is made up of Pure CSS3 i.e. without the usage of any Images or JavaScri...


Made By: Designshack
Edited By: Yudhvir Singh Ahlawat

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. Live working demo of this button:

Download

Click To Begin

1.5MB .zip


To add this animated download button to your blog posts follow these steps :-

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


<style>

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

 

.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: -70px 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: -110px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -30px 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: -70px 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.5MB .zip</p>
    </div>

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

COMMENTS

BLOGGER: 4
Loading...
Name

A-Kay Aagaaz Ajay Devgn Akhil Akshay Kumar Ammy Virk Amrit Maan Android Anushka Sharma Apps Army Automobile Avantika Awards Ayurveda B Praak Babbal Rai Badshah Beat Minister Bilal Saeed Blogger Tips Blood Donation Bollywood Books BoxOffice Collection BSNL Bunty Bains Cars Chemical Engineering Clash Of Clans Computer Tricks Defense Forces Dera Sacha Sauda Desi Crew Desi Routz Didar Othie Documentary Download Dr. Zeus Education Emraan Hashmi Encoding Engineering English Songs Entertainment Fazilpuria Filmfare Finance Funny Gaming Garry Sandhu Geeta Zaildar Gippy Grewal Girik Aman Goldboy Gurmeet Ram Rahim Hacking Happy Raikoti Hardeep Grewal Harish Verma Harshit Tomar Haryanvi Songs Health Himanshi Khurana Himesh Reshammiya Hindi Songs History HKNKJ Hollywood Honeypreet Insan How to HTML Ikka Inspiration Internet Tips Jaani Jassie Gill Jatinder Shah Jattu Engineer Jay-K Jenny Johal Jordan Sandhu Kamal Heer Kamal Khaira Kambi Kanth Kaler KRK Kulbir Danoda Living Lyrics Maninder Kailey Mankirt Aulakh Manni Sandhu Mannu Diwana Mass Transfer Master Saleem MD KD Mehtab Virk Mobile Movie Reviews Movie Trailer MSG Apparels MSG Products Music My Diary Neha Kakkar News Nimrat Khaira Ninja Open Letters Parmish Verma Pav Dharia People Pollywood Posters Prabh Gill Preet Hundal Preet Mand Product Reviews Punjabi Songs Raftaar Rakhi Sawant Randeep Hooda Religion Reviews Riddle Salman Khan Shael Oswal Shah Rukh Khan Shakira Sharry Mann Sheera Jasvir Short Films Sippy Gill Social Sonam Bajwa Sports Star Talks Sukh Sanghera Sukh-E Sundar Pichai Sushil Kumar Tanvi Nagi Tarsem Jassar Tech Terrorism Tony Kakkar Top List Tutorials TV Series Twitter Virus Solutions Wallpapers Wars Windows Tips Wrestling Writings Yoga YWF Events
false
ltr
item
Youth Voice: Adding Animated Download Button To Blogger Posts
Adding Animated Download Button To Blogger Posts
http://3.bp.blogspot.com/-uFtSZoDTsmE/VI_gbIlJPeI/AAAAAAAAAbk/uBq_7xMfeA4/s1600/animated%2Bdownload%2Bbutton.jpg
http://3.bp.blogspot.com/-uFtSZoDTsmE/VI_gbIlJPeI/AAAAAAAAAbk/uBq_7xMfeA4/s72-c/animated%2Bdownload%2Bbutton.jpg
Youth Voice
http://www.ywfyouthvoice.com/2014/12/adding-animated-download-button-to.html
http://www.ywfyouthvoice.com/
http://www.ywfyouthvoice.com/
http://www.ywfyouthvoice.com/2014/12/adding-animated-download-button-to.html
true
7857785866171732330
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy