Aug 12, 2011 Sliding Download Button Using jQuery
Here's an example of the button I'm showing you how to make.
First off we'll be starting with making sure we are linking to the jQuery library. Here's the one I used for the demo, linking to the jQuery CDN hosted by Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Then we add the styles of the button to our CSS file. By the way, I used the CSS Gradient Tool by Colorzilla to generate the background gradients. They are compatible with almost every browser. So the only image that makes up this button is the download icon.
.buttonWrap{width:170px; height:80px; display:block;}
.toggleButton{
display:block;
width:170px;
height:30px;
padding:10px 0 0 0;
text-size:24px;
font-family:arial, sans-serif;
font-weight:bold;
text-align:center;
color:#FFF;
text-decoration:none;
border-radius:7px;
cursor:pointer;
border:1px solid #05ABE0;
text-shadow:-1px -1px 0px #05ABE0;
background: #87E0FD;
background: -moz-linear-gradient(top, #87E0FD 0%, #53CBF1 40%, #05ABE0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87E0FD), color-stop(40%,#53CBF1), color-stop(100%,#05ABE0));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87E0FD', endColorstr='#05ABE0',GradientType=0 );
}
.toggleButton:active{
background: #87e0fd;
background: -moz-linear-gradient(top, #05ABE0 0%, #53CBF1 40%, #87E0FD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05ABE0), color-stop(40%,#53CBF1), color-stop(100%,#87E0FD));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05ABE0', endColorstr='#87E0FD',GradientType=0 );
}
a.toggleSection{
display:none;
color:#333;
background:#EEE url(icon-dl.png) no-repeat 5px center;
border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD;
border-radius:0 0 5px 5px;
width:60px;
float:right;
padding:5px 5px 5px 40px;
margin:0 10px 0 0;
font-family:arial, sans-serif;
font-size:12px;
text-decoration:none;
}
a.toggleSection span{font-weight:bold; display:block;}
Next up is the slide function of the button that will show us the tab with the download link when we click on it.
$(document).ready(function() {
$('.buttonWrap').click(function() {
if ($('.toggleSection').is(":hidden")) {
$('.toggleSection').slideDown("slow");
} else {
$('.toggleSection').slideUp("slow");
}
return false;
});
});
The final step is to put the html of the button where you want to display it.
<div class="buttonWrap"> <div class="toggleButton">Download Now!</div> <a href="#" class="toggleSection"> <span>Exe</span> 7.27 MB </a> </div>
And there you have it. If you have any questions about the code, leave a comment. If you like to have the code for this project you can download it below.
VERY nice mate, I'm going to use this for sure :)
Really interesting, i will keep it in mind on my next project. Keep posting cool tutorials
@Jim Will do, thanks for the comment.
Hello, deploy this code in my project, but when I click the download link of the file does not open a file to download ... could tell me what should I change the link to function?
This is a test.