How to Create and Add a CSS Download Button in Websites and Blogger

0

Do you offer files for download on your website and blog? It is always a good practice to create and make use of a download button instead of the usual text like download link in ordee for your blog to look more eye catching and professional. This means that you need to either create an image to use as download button or use CSS to generate one for yourself. Any of the two options you decide to follow will be good but take note of the size of the button because it might negatively affect your page’s loading time. This is why I always encourage the use of CSS in creating some logo like images and effect that makes your website and blog load faster.

Today, I will be showing you guys how to create a simple professional looking download button purely from CSS as outlined on DesignShack by Joshua Johnson. So to create and add the button to your website and blog, follow the steps below

Adding to Website:

  • To add the download button to your website, just open the page you want to add the button to.
  • Copy the CSS code below and paste just below the <head> tag or anywhere between the <head> and </head> tag.
<style type="text/css">

.EH-button {

    margin: 50px auto;

    width: 200px;

}


 /* Educative Helper download button */


.EH-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 */

}


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

}

.EH-button p {

    background: #000;

    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: 150px;

    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;


}

.EH-button:hover .up {

    margin: -85px 0 0 10px !important;

}

.EH-button:hover .down {

    line-height: 35px !important;

    margin: -5px 0 0 10px !important;

}

.EH-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 */


}

.EH-button:active .up {

    margin: -20px 0 0 10px !important;

}

.EH-button:active .down {

    margin: -70px 0 0 10px !important;

}

</style>
  • Next locate the <body> tag and add the below code anywhere between the <body> and </body> tag, depending on where you want the download button to appear.
<div class="EH-button">

      <a href="FILE_URL">Download</a>

      <p class="up">Click to Start Download</p>

      <p class="down">File Size: 350MB</p>

    </div>
  • Check your page to verify that the download button is appearing exactly where you want it to.

Adding the Download Button to Blogger

  • Login to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • Once in the Edit HTML page, search for ]]></b:skin> with the help of Ctrl + F.
  • Now copy the CSS code below and paste just before/above ]]></b:skin>
.EH-button {

    margin: 50px auto;

    width: 200px;

}


 /* Educative Helper download button */


.EH-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 */

}


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

}

.EH-button p {

    background: #000;

    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: 150px;

    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;


}

.EH-button:hover .up {

    margin: -85px 0 0 10px !important;

}

.EH-button:hover .down {

    line-height: 35px !important;

    margin: -5px 0 0 10px !important;

}

.EH-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 */


}

.EH-button:active .up {

    margin: -20px 0 0 10px !important;

}

.EH-button:active .down {

    margin: -70px 0 0 10px !important;

}


  • Click on Save Template to apply the CSS code to your blog.
  • After adding the CSS code to your blog’s template, all you need to do next is add the below line of code where ever you want to add the download button while composing a post.
<div class="EH-button">

      <a href="FILE_URL">Download</a>

      <p class="up">Click to Start Download</p>

      <p class="down">File Size: 350MB</p>

    </div>

Customization:

The information highlighted in BOLD are the ones which you must have to change in order for the button to serve the specific purpose you want it to serve.

  • Using a download button in your website or blog, means linking it to the original URL of the file to be downloaded. To link the download button we have just created to the original URL of the file you want your user to have access to once they click on the button, then you will need to replace FILE_URL with the URL of the file (i.e. the address where the file to be downloaded is located).
  • If you wish, you can change the text Click to Start Download to whatever you want.
  • Finally replace 350MB in the text File Size: 350MB to the original size of the file you want your visitors to download. This will tell them the size of the file they will be downloading if they decide to click on the download button.

For questions pertaining to how to add this awesome animated CSS download button to your website and Blogger, please do feel free to ask via the comment box below. ENJOY!

LEAVE A REPLY

Please enter your comment!
Please enter your name here