D.A.P. Design Team

Let’s get right to it.

1. First you want to start with some HTML for the button

<a href="#" class="button">
<span class="download"> Download</span>
</a>

2. You then want to style the button itself with some good-ole CSS.

/* -------------------- */
/* STYLES */
/* -------------------- */
a.button{color:#fff;margin:0 0 15px 0;list-style:none;background-color:#fe1a00;border:1px solid #d83526;line-height:32px;display:inline-block;font-weight:bold;text-shadow:0 1px 0px rgba(0,0,0,0.4);vertical-align:middle;padding:10px 20px 10px 15px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;}
a:hover.button{background-color:#ce0100;color:#fff;}

3. Then you want to structure your classes for each type of button

/* CLASSES */
/* -------------------- */
.download{background:url(images/download.png) left center no-repeat;text-indent:42px;display:block;}
.add{background:url(images/add.png) left center no-repeat;text-indent:42px;display:block;}

Here’s how the button will look.

Download Something

Add Something

You can even add some snazzy CSS3 effects for the button hover.

/* -------------------- */
/* STYLES */
/* -------------------- */
a.button{color:#fff;margin:0 0 15px 0;list-style:none;background-color:#fe1a00;border:1px solid #d83526;line-height:32px;display:inline-block;font-weight:bold;text-shadow:0 1px 0px rgba(0,0,0,0.4);vertical-align:middle;padding:10px 20px 10px 15px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;
 -webkit-transition:all .2s ease-in-out;
 -moz-transition:all .2s ease-in-out;
 -o-transition:all .2s ease-in-out;
 -ms-transition:all .2s ease-in-out;}
a:hover.button{background-color:#ce0100;color:#fff;}