Online Tips for Web Developer/Designer

This post will teach you how to make a proper CSS button.

<a class="button btn_file btn_blue">
     <span>
          <span>Button Text</span>
     </span>
</a>

From the above code you can see that I had entered 3 classes for the < a > tag, they are button, btn_file and btn_blue. This is how I usually construct the class layer.

• class=”button” this control the default button layout
• class=”btn_file” this class display which icon to show
• class=”btn_blue” if you have a different set of color setting or other layout for the button, this is the class to overwrite your default class. This can also be use as additional setting for your button

So I had draft out a layer of the a tag and span tag which are used for this button.

More details on how we construct the button.

This is the final result that I draft out on paper.

a.button {
     float:left;
     margin: 20px 30px 10px 0;
     color: #333333;
     border: 1px solid #CCCCCC;
     background: url("YOUR_IMAGE_FILE.png") repeat-x center bottom;
     display: block;
     white-space: nowrap;
     text-decoration: none;
}

a.btn_file span{
     background-image: url("YOUR_IMAGE_FILE.png");
     background-position: 10px 7px;
     background-repeat: no-repeat;
     border: 1px solid #FFFFFF;
     display: block;
     padding: 0 15px 0 33px;
}

a.button span span{
     background: none;
     border: none;
     display: inline;
     height: auto;
     line-height: 28px;
     padding: 0;
}

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!