Create Stylish Download Button Using jQuery

Hello everyone, welcome to my today’s post. Today I am going to present a tutorial about how to create a stylish download button using jQuery. Well, all internet users regularly visits lots of websites and Download huge contents from those websites. That’s why, few days ago I thought about how to make this download segment more interesting and user friendly.

After that, I found an idea, implemented it and can not wait too long to share with you. Two different version I’m going to upload for you, first one is image button version and second one is pure CSS3 glossy Button. I’ve attached demo and download links below the tutorial. So, that you can view demo and download source code. Let’s go –

Demo 1(Image Version):

CSS Code:

div.download-container{
   width: 150px; float: left;
}
div.download-button{
    width: 150px; height: 40px;
    background: url('download_button.png') top center no-repeat;
    cursor: pointer;float: left;
}
div.download-link{
    border: 1px solid #E57F00; border-top: 0px;
    width: 118px; height: 30px;
    float: right;display: none;background: white ;
    margin-right: 15px;font-family: verdana;
    font-size: 14px;text-align: center;
}
div.download-link span{
    color: black; font-weight: bold;
}

jQuery Code:

$(function(){
    $("div.download-button").bind("click",function(){
        $("div.download-link").slideToggle();
    });
});

HTML MarkUp:

<div class="download-container">
  <div class="download-button"></div>
   <div class="download-link">
    <img src="zip_icon.png" alt="zip-icon"/>
      <span>
       <a href="http://www.coolajax.net">Zip File</a>
      </span>
    </div>
</div>

Demo & Download

Demo 2(Pure CSS3 Version):

CSS Script:

div.download-container{
    width: 150px;
    margin: 0 auto;
    position: relative;
}
div.download-button{    
    width: 175px; height: 20px;     
    cursor: pointer;
    float: left;
    border: 1px solid lightgray;
    border-radius: 10px;
    text-align: center;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;    
    background: rgb(230,240,163);
    background: -moz-linear-gradient(top,  rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1)));
    background: -webkit-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: -o-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: -ms-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: linear-gradient(to bottom,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
    padding: 10px 10px 10px 10px;
    box-shadow:1px 0px 1px rgba(0,0,0,0.5);
    position: absolute;

}
div.download-link{    
    border: 1px solid lightgray;
    border-top: 0px;
    width: 165px; height: 30px;
    padding: 5px;    
    display: none;
    background: white ;
    margin-right: 15px;    
    text-align: center;
    position: absolute;
    top: 43px;
    left:10px;
    box-shadow:1px 0px 1px rgba(0,0,0,0.5);
}
div.download-link span{
    color: black; font-weight: bold;
}

jQuery Code:

$(function(){
    $("div.download-button").bind("click",function(){
        $("div.download-link").slideToggle();
    });
});

HTML MarkUp:

<div class="download-container">
    <div class="download-button">Download</div>
    <div class="download-link">            
        <span>
            <a href="http://www.coolajax.net">
                <img src="icons/ai.png" />
            </a>
        </span>
        <span>
            <a href="http://www.coolajax.net">
                <img src="icons/doc.png" />
            </a>
        </span>
        <span>
            <a href="http://www.coolajax.net">
                <img src="icons/pdf.png" />
            </a>
        </span>
    </div>
</div>

Demo & Download

That’s all for today. Thanks for reading my tutorial.

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!