A CSS Button Creation Class
By Scott Mitchell
Introduction
In an earlier article, Creating CSS Buttons, I examined how to create
graphical-appearing buttons using nothing but HTML and CSS. While this approach is fairly simple to
implement - just add a few style tags and a suitable HREF and DIV tag - it is a bit mundane to have to do
for each and every button, especially since you need to have a unique set of style classes and IDs for each
unique button. (If you are thoroughly confused by this point, be sure you've read the
Creating CSS Buttons article before delving into this one...)
In this article we will examine a small, but handy class to help automate the process of creating CSS buttons.
Furthermore, when using a class we'll be creating and placing buttons much like you would in a VB project.
(For more information on creating and using classes in VBScript, be sure to read Mark Lidstone's excellent
article: Using Classes within VBScript!)
Determining the Class Properties
The first step in creating our CSS button creating class is to decide what properties makeup a CSS button.
While there is literally no limit to the number of properties one could conceivably attribute to a button,
for this article I am going to assume that this set of properties conveys the basic features one would like to
have in a button:
CssButton Class Properties | |
|---|---|
Name | Uniquely identifies each button. |
BackColor | Specifies the background color of the button. |
BorderColor | Specifies the color of the button's border. |
Font | The font to use for the button's label. Must be in the format: style size font-name, such as: bold 12pt arial. |
FontColor | The color of the font when the button is not selected. |
Width | The width of the button. |
Text | The text to display on the button. |
Url | The Url to take the user to when the click the button. |
MouseOverColor | The color to make the font when the user's mouse moves over the button. This will only work for visitors using IE... |
These properties describe each button. Realize that you must use a unique Name for each
independent button you want on a given Web page. If you create multiple buttons with the same name,
when you mouse over one button, all of those buttons will highlight.
Creating the Class Methods
Now that we've looked at the properties for the CssButton class, let's examine the two methods we'll need:
GenerateStyleTag() and GenerateButtonTag(). Since each CSS button needs its own
classes/IDs declared in a STYLE tag, and, additionally, needs an HREF/DIV
section to display the button, these two methods return the applicable STYLE tag and
HTML. These methods are very simple, and can be seen below:
|
Creating a Button - the Whole Process
Now that we have outlined the properties in our class, along with the two needed methods, let's examine
how we will actually create some buttons on a Web page. The first thing to do is to create an instance
of our CssButton class for each CSS button that we wish to display on the page. (The complete
source for the CssButton class is available in a download at the end of this article.)
A very simple example can be seen below. It creates two buttons, one that links to Yahoo! and one that links to Lycos. (Be sure to try out the live demo!)
|
Pretty straightforward, no? To create a button, we simply create an instance of the
CssButton class, set its properties, then call output the CSS/HTML of its
GenerateStyleTag() and GenerateButtonTag() methods. Note that you
should create all of your buttons and set all of the properties before you emit any HTML, and
then display each button's associated style tags in the HEAD portion of the HTML document.
Hopefully with this class you'll find creating CSS buttons that much easier! Enjoy, and Happy Programming!
Attachments
CssButton class (in text format)