I needed a way to style my anchor links as buttons on the page.
Of course re usabality is very important, so I thought and implemented a way to do this using CSS.
I simply created a class per button, and styled the background property of the anchor link (<a>).
The images are all .gif images with a 16x16 pixel with and height.
Here is a sample of the css:
.button-add,
.button-save,
.button-cancel {
padding-left: 19px;
background-position: 0 45%;
background-repeat: no-repeat;
text-decoration:none;
white-space: nowrap;
height: 20px;
line-height: 19px;
zoom:1; /* to maintian padding integrity in ie 5.5 >
*/
}
I then set the image background property seperately:
.button-add{background-image:url('add.gif');}
.button-save{background-image:url('disk.gif');}
.button-cancel{background-image:url('cancel.gif');}
Then the HTML markup would look like this:
<a class="'button-add'" href="javascript:void(0);">Add</a>
<a class="" href="javascript:void(0);">Save</a>
<a class="button-cancel" href="javascript:void(0);">Cancel</a>
The result:
Add
Save
Cancel
