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.

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.