Home Blogging Tips & Tweaks Animated CSS3 Download Button for Blogger, WordPress and Websites

Animated CSS3 Download Button for Blogger, WordPress and Websites

Some couple of weeks back, I showed you guys how to create an Awesome CSS3 Animated Download Button for Website and Blogger. If you have gone through that tutorial and loved it, then it means you somehow offer files for download on your website and blog. Instead of using the normal download links which looks very unprofessional, it is advisable to use buttons that does not only add more flavor to your webpage but also different the download link from the other links in the webpage. Most of you must have resorted to the use of image buttons which I will sadly tell you is not good for your website’s load speed. Using image download button reduces your page download speed because the image has to be fetched (downloaded) unto the page before it can appear for access.

I know by now you must be asking yourself what next to do if I am discouraging the use of image download buttons. The best thing to do is use CSS to create your button which doesn’t only make your page’s load speed faster but also help add awesome effects to the website/blog page. The difference between the download button we will be creating today and the one we created in the tutorial on Awesome CSS3 Animated Download Button for Website and Blogger, is the direction of the hover effect and the information it contains. This download button which on mouse hover will inform users of the number of times the file has been download or more probably the size of the file the user is about to download, can be added to a website or blog page by following the simple guide below.

For Blogger Page:

  • Login to Blogger and go to the dashboard of the blog you want to add the download button to.
  • Go to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for ]]></b:skin> with the help of Ctrl + F.
  • Copy the CSS code below and paste just above ]]></b:skin>
* {

  margin:0px;

  padding:0px;

}


body {

  background:url("https://www.educativehelper.com/wp-content/uploads/2020/01/EHdownload.gif");

}


.container {

  width:180px;

  display:block;

  margin:200px auto 0px auto;

}


.EH_down {

  display:block;

  transition:.5s all ease;

  cursor:pointer;

  background-color: #09C;

  width:180px;

  padding-left:20px;

  border:2px solid #000;

  border-bottom-left-radius:5px;

  border-top-left-radius:5px;

  position:relative;

}


h4 {

  line-height:50px;

  color: #FFF;

  text-align:center;

  text-transform:uppercase;

}


.times {

  background-color: #000;

  margin-top:200px;

  width:140px;

  margin-left:42px;

  z-index:-9;

  border:1px solid #AAA9A9;

  position:absolute;

  transition:.5s all ease-in-out;

  top:10px;

}


.time {

  line-height:30px;

  text-align:center;

  color: #FFF;

}


.times_abs {

  background-color: #09C;

  cursor:pointer;

  width:20px;

  border-top:2px solid #000;

  border-right:2px solid #000;

  border-bottom:2px solid #000;

  border-bottom-right-radius:5px;

  border-top-right-radius:5px;

  height:50px;

  position:absolute;

  top:0;

  margin-left:200px;

  margin-top:200px;

  transition:.5s all ease-in-out;

}


.EH {

  text-align:center;

  margin-left:40px;

  color:#4B4B4B;

  margin-top:10px;

}


a {

  color:#4B4B4B;

  transition:.2s all ease-out;

  text-decoration:none;

}


a:hover {

  color:#2ecc71;

}


.container:hover .times {

  margin-left:200px;

}


.container:hover .EH_down {

  background-color:#09C;

}


.container:hover .times_abs {

  margin-left:340px;

  border-left:2px solid #09C;

  background-color:#09C;

}
  • Click on Save Template to apply the CSS code to your blog page template.
  • Now when ever you wish to add the download button while in the compose page for the post, just simply switch to HTML mode and add the HTML code below.
<div class=container>

  <div class=EH_down>

     <a href="FILE_URL"><h4>DOWNLOAD NOW</h4></a>

  </div>

  <div class=EH_times>

  <div class=times>

    <h5 class=time>FILE SIZE: 350MB</h5>

  </div>

  <div class=times_abs></div>

  </div>

</div>

<div>

<h5 class=EH><a href="http://www.educativehelper.com">Get this button</a></h5>

</div>

Adding to Website:

To add the download button to a website,

  • Open the page you wish to add the download button to using a HTML editor.
  • Copy the below CSS code and paste just below <head> tag or above </head> tag.
<style type="text/css">

* {

  margin:0px;

  padding:0px;

}


body {

  background:url("https://www.educativehelper.com/wp-content/uploads/2020/01/EHdownload.gif");

}


.container {

  width:180px;

  display:block;

  margin:200px auto 0px auto;

}


.EH_down {

  display:block;

  transition:.5s all ease;

  cursor:pointer;

  background-color: #09C;

  width:180px;

  padding-left:20px;

  border:2px solid #000;

  border-bottom-left-radius:5px;

  border-top-left-radius:5px;

  position:relative;

}


h4 {

  line-height:50px;

  color: #FFF;

  text-align:center;

  text-transform:uppercase;

}


.times {

  background-color: #000;

  margin-top:200px;

  width:140px;

  margin-left:42px;

  z-index:-9;

  border:1px solid #AAA9A9;

  position:absolute;

  transition:.5s all ease-in-out;

  top:10px;

}


.time {

  line-height:30px;

  text-align:center;

  color: #FFF;

}


.times_abs {

  background-color: #09C;

  cursor:pointer;

  width:20px;

  border-top:2px solid #000;

  border-right:2px solid #000;

  border-bottom:2px solid #000;

  border-bottom-right-radius:5px;

  border-top-right-radius:5px;

  height:50px;

  position:absolute;

  top:0;

  margin-left:200px;

  margin-top:200px;

  transition:.5s all ease-in-out;

}


.EH {

  text-align:center;

  margin-left:40px;

  color:#4B4B4B;

  margin-top:10px;

}


a {

  color:#4B4B4B;

  transition:.2s all ease-out;

  text-decoration:none;

}


a:hover {

  color:#2ecc71;

}


.container:hover .times {

  margin-left:200px;

}


.container:hover .EH_down {

  background-color:#09C;

}


.container:hover .times_abs {

  margin-left:340px;

  border-left:2px solid #09C;

  background-color:#09C;

}

</style>
  • Finally in between the <body> and </body> tag section, add the HTML code below anywhere you want the download button to appear.
<div class=container>

  <div class=EH_down>

    <a href="FILE_URL"><h4>DOWNLOAD NOW</h4></a>

  </div>

  <div class=EH_times>

  <div class=times>

    <h5 class=time>FILE SIZE: 350MB</h5>

  </div>

  <div class=times_abs></div>

  </div>

</div>

<div>

<h5 class=EH><a href="http://www.educativehelper.com">Get this button</a></h5></div>

Verify if the button is appearing where you want it to.

Changes to Make:

Now when you want to make use of the above button as your file’s download button, you will have to make the following changes on the HTML code.

  • Replace FILE_URL with the file’s download link URL.
  • Replace 350MB with your file’s original size.
  • Remember that all the texts highlighted in BOLD can be changed to whatever you want.

Enjoy!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments