Introduction
Being able to successfully navigate a Web site is an important metric in measuring a site's usability. To assist with navigation, many Web sites use graphical buttons (usually GIF files). While these buttons are not terribly difficult to create with a decent image editor, they can be a bit burdensome when all you have at your disposal is Microsoft Paint. Furthermore, while graphical buttons do not add that much size to the page, the bandwidth requirements do add up, resulting in slower loading pages for your users.
One solution is to use cascading style sheets (CSS) to create buttons. Using CSS, you can create buttons with just a few lines of plain text HTML and CSS tags! (To learn more about CSS, be sure to check out these links.) The downside of using CSS to generate buttons is that the buttons look less professional (in my opinion) and that they can only be rendered on CSS-compliant browsers. For the examples we'll be looking at in this article, they are functional in both IE 5.0+ and Netscape 6.1+. Certain "extra" features, which we'll be sure to note, only work in IE.
Creating CSS Buttons
The idea for creating CSS buttons was shamelessly borrowed from the book: Web Design: The Complete Reference. This book presented some code that could be used to generate a button using style sheets. The below code shows a simple example:
<% ' Define the stylesheet %>
<STYLE TYPE="text/css">
<!--
#mybutton {border-style: inset;
border-color: #ff6633;
background-color: #CC3300;
text-decoration: none;
width: 80px;
text-align: center;}
