I visit many websites that use simple text links for a menu. There's nothing
wrong with that. It's quick and easy and gets the job done. However, today's
Web users expect something a little more sophisticated, and they might find
simple text links crude and non-professional.
The webpage designers that use simple text links don't want to take the
time to make graphic menu buttons.In this article, you'll learn how to avoid
the need to make graphic menu buttons, yet still produce the same visual
effect that graphics provides. You'll learn how to create graphical looking
buttons by applying simple style rules. The style rules you will apply are
those of the Cascading Style Sheets (CSS) box model.
Before we go into the CSS box model, let's discuss a few alternatives. We are
all familiar with the standard gray form button. Some webpage designers don't
realize how easy it is to replace a text link with a form button. Just use
the buttons onclick event to execute an inline Java Script statement that
loads the links URL into the documents location object as shown below.
The downside of using a form button is that it belongs to a form. Even a loose
button like the one described above belongs to the default form, forms, in
the documents forms collection. This method of defining a button could interfere
with other buttons and forms declared on the same page. You could prevent this
by defining a form with a unique name for each button, but that's too much work.
We are all familiar with using a graphic in a link, as shown below.
<a href="URL"><img border=0 src="image1.jpg"></a>
The problem with this is that unless the user moves their mouse button over
the graphic, causing the hand icon to appear, they may not realize it's a
clickable link. You need to use a graphic that looks like a button. You must
also edit the text on the graphic for each link.