Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy CSS Buttons

By Stephen Bucaro

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.

<input type="button" value="Text"
onclick="javascript:document.location.href='URL'">

Note: Observe the use of single quotes and double quotes carefully.

You don't need to accept the standard form button's default gray color. You can apply style rules to a form button to make it look like a graphic button, as shown below.

<input type="button" value="Text"
style="background-color:lightblue; border-color: blue;"
onclick="javascript:document.location.href='URL'">

You can even use style rules to create a form button with a graphic background as shown below.

<input type="button" value="Text"
style="background-image:url('image1.jpg');
  border-color:lightblue;"
onclick="javascript:document.location.href='URL'">

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[0], 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.