Creating CSS Buttons
By Scott Mitchell
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:
|
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:
|
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:
|
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!