CSS mouse over buttons for beginners

Cascading Style Sheet Tutorials

Mouseover Buttons

Take a look at the buttons on the left. If you're viewing this with Internet Explorer (about 85 - 90% of the browsers in use), you can run your mouse across the button text and watch it change colors. Looks like a simple series of buttons with additional mouseover buttons doesn't it. But all the buttons are the same, blank button!

Here's the button I used for all the buttons on the left:

Advantages

So what are the advantages of this technique? Speed, space, and time! Since all buttons are really just one blank button, your page will load much faster than if you had several individual images. The more buttons you need, the more time you save. And with only one button, you save disk space on your server.

Any time you want to add a button because you've added new content, you can do it in seconds because you don't have to make a new image. Of course, you may not know how to make your own buttons, so that's another advantage. With this technique you don't have to rely on finding buttons with the text you want. Just find some cool blank ones and add your own text!

Here's how it's done...

To make the Mighty Mouse(over) buttons, you first need to place this style tag in the <HEAD> section of your HTML page.

This is the part that makes the link change colors when the cursor passes over the text on the button. Change the colors to your liking.

A:link... is the color of the link when there is no cursor on the link
A:visited... would be the color of a visited link, you may want to keep it the same as your link color
A:hover... is the color the text changes to when the cursor is on the text

Next comes the tricky part, but it's not too bad if you've ever worked with tables before. This would be the code for one button:

You'd repeat this code for each button, just changing the URL and link title to create a new button. Let's break that down so you understand what's going on.

The button must be contained in a table in order to get the text to line up precisely. The cellpadding, cellspacing, and border should all be set to zero.

<tr>

Every table has a row, if you need more explanations on tables, please see my tables tutorial.

The table data cell contains all the magic that makes it work. Usually you will set the width and height of the td cell to the same size as the button, but occasionally you may need to set it a pixel or two smaller to keep it from starting to repeat. The background of the table data cell is the blank button. Just code the image path and the name and type of image of the button in the background part. The align="center" centers the text horizontally, and the valign="middle" centers the text vertically.

This, of course, is the actual link. The style="text-decoration:none" removes the underline from the link. You could put that in the <HEAD> section with the other style tags I showed you earlier, but if you use plain text links also (as I do at the bottom of every page) then it would remove the underline from them too. I didn't want that to happen here, so I included it in the actual link.

The rest of the code, of course, just cancels the link and the table. You can include a change in font size, add a bold tag, or any other code you would normally want to use with your links as well. For the sake of simplicity, I didn't show that, but on the button examples on this page I also used a <font size="+1"> tag and a <B> tag with each button link.

Other things to know...

If you do this as I've shown here, using the buttons down the left side, then you'll need to put the button tables inside another two column table. This two column table is the control table. The first column would hold all the buttons, and the second column would hold your page content. That's not as hard as it sounds. One of my table tutorials has copy and paste code for a left border style two column table, perfect for this technique. Think of that table as your control table, and the button table above as the content of the first column in the control table. It's really not that hard, give it a shot!

In the control table mentioned above, for the two columns (the TD cells), use the valign="top" attribute with them so that the buttons and content both start at the top of each column.

You would actually have to put these button tables inside another table to do a horizontal menu bar style button set too. Each button would have it's own TD cell in the containing table. Otherwise they will stack on top of each other. Now you probably wonder why you need the control table for a left border style row of buttons if they stack on top of each other. Because I said so, darn it! Or it could be that the main content of your page won't show up until after the last button if you don't use the control table.

If you make your link text too long, longer than the button, it will force the td cell bigger than your code and cause the background to repeat in the cell. Looks like heck and defeats the purpose, so pick short, descriptive text links. Before starting a bunch of buttons, try coding your longest link onto one. If it's too long and you can't change the wording, you'll need to find a bigger blank button.

Lastly, if you forget to close a table, it will cause Netscape to destroy your hard drive! Ok, not really, but it will cause the page from where an open table is on down to show up blank. If you are surfing and run into a blank page on someone's site, chances are they forgot to close a table.

[Back to the Stage 6 Index]