When you think ASP, think...
Recent Articles xml
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips
spgif spgif

Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
spgif spgif
ASP ASP.NET ASP FAQs Feedback topnav-right
Print this page.
Published: Wednesday, October 10, 2001

A CSS Button Creation Class

By Scott Mitchell

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!)

- continued -

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
NameUniquely identifies each button.
BackColorSpecifies the background color of the button.
BorderColorSpecifies the color of the button's border.
FontThe font to use for the button's label. Must be in the format: style size font-name, such as: bold 12pt arial.
FontColorThe color of the font when the button is not selected.
WidthThe width of the button.
TextThe text to display on the button.
UrlThe Url to take the user to when the click the button.
MouseOverColorThe 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:

Public Function GenerateStyleTag()
  'Create the STYLE tag
  Dim strStyle
  strStyle = "<STYLE TYPE=""text/css"">" & vbCrLf & _
        "<!--" & vbCrLf & _
        "#mybutton" & Name & "   {border-style: inset; " & vbCrLf & _
        "             border-color: " & BorderColor & ";" & vbCrLf & _
        "             background-color: " & BackColor & ";" & vbCrLf & _
        "             width: " & Width & ";" & vbCrLf & _
        "             text-align: center; }" & vbCrLf & vbCrLf & vbCrLf & _
        "A.buttontext" & Name & " {color: " & FontColor & "; " & vbCrLf & _
        "              text-decoration: none; " & vbCrLf & _
        "              font: " & Font & ";" & vbCrLf & _
        "              cursor: hand; }" & vbCrLf & vbCrLf & vbCrLf & _
        ".buttonover" & Name & " {color: " & MouseOverColor & ";" & vbCrLf & _
        "             text-decoration: none; " & vbCrLf & _
        "             font: " & Font & ";" & vbCrLf & _
        "             cursor: hand; }" & vbCrLf & _
        " // -->" & vbCrLf & _

  GenerateStyleTag = strStyle
End Function

Public Function GenerateButtonTag()
  Dim strHTML
  strHTML = "<a href=""" & Url & """ class=""buttontext" & Name & """ " & _
        "onMouseOver=""this.className='buttonover" & Name & "';"" " & _
        "onMouseOut=""this.className='buttontext" & Name & "';"">" & _
        vbCrLf & "<div id=""mybutton" & Name & """>" & vbCrLf & Text & _
        vbCrLf & "</div></a>" & vbCrLf

  GenerateButtonTag = strHTML
End Function

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!)

'... Insert declaration of CssButton class here ...

Dim btnYahoo, btnLycos
Set btnYahoo = New CssButton
Set btnLycos = New CssButton

btnYahoo.BackColor = "#aaaaaa"
btnYahoo.BorderColor = "#bbbbbb"
btnYahoo.Font = "bold 12pt Verdana"
btnYahoo.FontColor = "black"
btnYahoo.Width = "80px"
btnYahoo.MouseOverColor = "yellow"
btnYahoo.Url = "http://www.yahoo.com/"
btnYahoo.Name = "yahoo"
btnYahoo.Text = "Yahoo!"

'Display the Yahoo button
Response.Write btnYahoo.GenerateStyleTag()
Response.Write btnYahoo.GenerateButtonTag()
Response.Write "<p> </p>"

btnLycos.BackColor = "#aaaaaa"
btnLycos.BorderColor = "#bbbbbb"
btnLycos.Font = "10pt Arial"
btnLycos.FontColor = "black"
btnLycos.Width = "70px"
btnLycos.MouseOverColor = "yellow"
btnLycos.Url = "http://www.lycos.com/"
btnLycos.Name = "lycos"
btnLycos.Text = "Lycos"

'Display the Lycos button
Response.Write btnLycos.GenerateStyleTag()
Response.Write btnLycos.GenerateButtonTag()
[View a 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!

  • By Scott Mitchell


  • Download the CssButton class (in text format)
  • View the live demo

  • ASP.NET [1.x] [2.0] | ASPFAQs.com | Advertise | Feedback | Author an Article