Feb 5, 2013

Posted by in Web Development | 1 comment

Free CSS with Demo and Download Buttons for blogging site

Demo Download Button Set Example

Demo Download Button Set Example

We often need to have a clean and neat demo and download button in our blogging site, I had searched a lot but found none, so here I am coming up with this cool set of buttons which you can happily use for free in your website.
PS :: Use the demo and download button to see it in action / download to use. There are different color buttion which you may experiment to match your website’s look.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Download Button for blogs</title>
<style type="text/css">
#downloadDemo {
width: 465px;
height: 70px;
margin: 25px auto 40px;
position: relative;

#downloadDemo.both a {
float: left;
margin-left: 20px;

#downloadDemo a {
border: none;
border-radius: 7px;
box-shadow: 0 1px 1px #CCC;

a.greenButton {
width: 202px;
height: 68px;
display: block;
text-indent: -9999px;
outline: none;

a.greenButton {
    background: url('demo_dwd_btns-voilet.png') no-repeat;

a.greenButton.demo {
background-position: left top;

a.greenButton.demo:hover {
background-position: left bottom;

a.greenButton.download {
background-position: right top;

a.greenButton.download:hover {
background-position: right bottom;

.line {
height: 3px;
width: 100%;
bottom: -30px;
position: absolute;
background: url('line.png') no-repeat center top;
margin: 0 auto;
display: block;

    <div id="downloadDemo" class="both">            
     <a href="http://lovewithbug.com" class="greenButton demo" target="_blank">Demo</a>
     <a href="http://lovewithbug.com" class="greenButton download">Download</a>            
     <div class="line"></div>
  1. Very nice css tips, thanks.

Leave a Reply