Contents

CSS Sticky Header
Introduction
This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set. The result is something like this:

Simple, clean and nice. Click on the link below to download the source code ready to use in your web projects.
Download
click here to download the source
HTML Code
You can design this kind of buttons using this simple structure: a link (<a> tag) with a span tag inside, in this way:
Add to your bookmark
You can replicate this structure for all buttons you want to add in your page:

where link tag (<a>) is the "container" of the button:

...and class property for span tag is equal to CSS class which contains in CSS background propery the icon you want to apply to the current button:

For example, you can define new buttons in this way:
CSS Code
This is the CSS code for button "container" which includes the button background and how the button looks (font, width, height...):
a.button{ background:url(img/button.gif); display:block; color:#555555; font-weight:bold; height:30px; line-height:29px; margin-bottom:14px; text-decoration:none; width:191px; } a:hover.button{ color:#0066CC; }
...and now we can add some classes to design each button in this way:
/* -------------------- */ /* CLASSES */ /* -------------------- */ .add{ background:url(img/add.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .delete{ background:url(img/delete.gif) no-repeat 10px 8px; text-indent:30px; display:block; } .user{ background:url(img/user.gif) no-repeat 10px 8px; text-indent:30px; display:block; } ...
For each class, you can set background property with the icon you want, directy from your preferred icon set.