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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy CSS Buttons

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.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268