No-Image Button Links

From:

                   THE INTERNET TUTOR
                Thursday, September 19, 2002
                      by Boogie Jack

Note: In code examples I add a period after each left arrow
bracket so the code can be viewed in all email programs. If 
you copy and paste, be sure to remove the periods or it won't 
work.

No-Image Button Links

Here is a way to create the look of buttons on your page, 
complete with a hover effect, without using any images. This 
is a nice effect in IE, and perhaps newer versions of Netscape, 
although while it works in Netscape 4.x, it's not as nice be-
cause the hover color doesn't work and it's harder to make the 
buttons the same size. About 95% of your visitor's will see the 
nicer version, and it works for users with older Netscape 
browsers as well, it just isn't as nice to look at.

Start by adding the following CSS to the HEAD section of your
page:

<.style type="text/css">
.change {background-color: #00FF00;}
<./style>

Next, you create your navigation menu. In the example below 
I have it set up for a vertical column of buttons. You could 
also set the buttons up in a horizontal row by adjusting the 
table accordingly.

<.!-- MENU from BoogieJack.com -->
<.form>
<.table bgcolor="#009C9C" border="0">
<.tr><.td bgcolor="#009C9C"
onmouseover="this.className='change'"
onmouseout="this.className='normal'">
<.input type="button" value="Boogie Jack's" style="background:
#009C9C; font-family: Comic Sans MS; font-weight: bold; height:23;
width:110px; valign: top;"
onClick=location.href='http://www.boogiejack.com'>
<./td><./tr><.tr><.td bgcolor="#009C9C"
width="160"onmouseover="this.className='change'"
onmouseout="this.className='normal'">
<.input type="button" value="CardYard" style="background:
#009C9C; font-family: Comic Sans MS; font-weight: bold; height:23;
width:110px; valign: top;"
onClick=location.href='http://www.cardyard.com'>
<./td><./tr><./table>
<./form>

Each form button is placed inside its own TD cell. The table 
and the table data cell (td) have the same background color. 
When the mouse is hovered over a TD cell, the hover color you 
programmed into the head section of your pages changes color. 
In this example, I used a greenish blue color for the normal 
background, and when the cursor is hovered over the form button 
(which is the link) there is a lime green glow that lights up 
around the button. That gives you the hover color glow, and 
because it's a form button, when you click the link you get 
the look of a button being pressed.

Of course, you can change the colors to anything that suits 
you, but be aware that if you place too much text on the form 
buttons, in IE the text will be cut off because it follows 
the CSS size specified. In older version of Netscape, the 
text won't be cut off because Netscape doesn't recognize 
the size value, so the button will be elongated.

One last thing to be aware of, because Netscape doesn't re-
cognize the size set in the CSS code, a width was added to 
the second td cell. This will force the buttons to be the 
same size, otherwise they will only be as big as the text 
needs room for. Because of the way Netscape displays forms 
and text, this size will often need to be bigger than you 
coded the button for in the CSS style tags. This will not 
effect the display in IE.

It sounds more complicated than it is. Just paste the above 
code into the appropriate sections of your page, remove the 
period after the left arrow brackets, and see how it works. 
Then start playing with the colors, text, etc. and you'll be 
a pro fake button-maker in minutes.

[report a broken link by clicking here]