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
Demo:
- Navigate to Template >>> Edit HTML.
- Once in the Edit HTML page, search for </body> with the help of Ctrl + F.
- Now copy the CSS code below and paste just before/above </body>
<style>
.abt-button {
margin: 50px auto;
width: 200px;
}
/* Get this button at prio-soft */
.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='#00b7ea', endColorstr='#009ec3',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='#00b7ea', endColorstr='#009ec3',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>
- 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="abt-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
RED 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!
