Creating CSS Buttons

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;} .buttontext {color: white; text-decoration: none; font: bold 12pt Verdana; cursor: hand;} </STYLE> <% ' Create the button %> <A HREF="http://www.yahoo.com/" CLASS="buttontext"> <DIV ID="mybutton"> Yahoo! </DIV></A>

Here you can see the above code in action. Go ahead and click the button, if you like, you'll be instantly wisked away to Yahoo!:

Creating Responsive Buttons
In the above example we used two style sheet items: a mybutton ID and a buttontext class for use in the A tag. Let's create a new class, buttonover, that can be used to highlight the color of the button when the mouse is over it.

To accomplish this, first create another class in the style tag:

<% ' 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;} .buttontext {color: white; text-decoration: none; font: bold 12pt Verdana; cursor: hand;} .buttonover {color: yellow; text-decoration: none; font: bold 12pt Verdana; cursor: hand;} </STYLE>

We want our button to use this new class when the mouse is moved over the button, and to use the buttontext class when the mouse leaves the button. Therefore, we'll use the onMouseOver and onMouseOut events for the DIV tag:

<A HREF="http://www.yahoo.com/" CLASS="buttontext"> <DIV ID="mybutton" onMouseOver="this.className='buttonover';" onMouseOut="this.className='buttontext';"> Yahoo </DIV></A>

Below you can see a live demo of this. Go ahead and move your mouse over the button. Neat, eh?

Where to Go from Here
You may be wondering why in the world there's a CSS article here on 4Guys, and how this relates to ASP. Well, obviously it doesn't... yet. I decided to write this article for two reasons: one, I think it is neat, espcially since I don't have any fancy-shmancy image editors to create professional looking buttons; second, I will tie this into ASP in a future article. If you're at all like me, then you love ASP and server-side programming, but client-side programming and HTML really ain't your thang. So, to compensate for this, I've created a VBScript class that generates all of the needed style sheets and HTML for generating buttons. Using the class is simple: specify the name of the button, its UI elements (background color, font information, width, etc.), the text of the button, and the URL the button should lead to when clicked, and the class automagically generates all the needed CSS and HTML markup. For more information on this class, be sure to read: A CSS Button Creation Class.

Happy Programming!