Here's an example of download size button .

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>

The article source:http://andrewchamp.com/articles/sliding-download-button-using-jquery