Since the dawn of Web Design fancy buttons that change when you place your mouse over them has wowed visitors for years. The problem that arises from creating this type of action is you needed to use JavaScript to create this. Yes you can find this JavaScript on various JavaScript directory sites; the problem has always been that mouse-over buttons are not search engine friendly. Is it possible to have fancy buttons, and keep them search engine friendly?

Mouse-over Buttons using CSS

The popularity of CSS (Cascading Style Sheets) has spawned a whole new area of design that simplifies creating these fancy mouse-over actions of buttons as well as keeps them search engine friendly.

Using CSS you can now create a style for your navigation that will give the effect of mouse-over buttons without creating the multiple images required for this using JavaScript. Before if you have 5 buttons you wanted to use for your site, and you wanted a mouse-over state for each one it meant creating 10 buttons (2 images for each button). Well using CSS all you have to create is one image. This image is going to have the normal state (what people see when they come to the page), and your over state (what people see when they place their mouse over the button).

My Button Image

As you can see there are 2 different states in one image. Well that looks fine, but how do my visitors know what the button points to? In comes CSS.

Now we are going to use CSS to control this image behind text to make it a mouse-over button. The first thing that must be done is to create a class for the normal state of the button:

a.mainlevel:link, a.mainlevel:visited { color: #947175; font-weight: bold; font-size: 11px; text-decoration: none; background: url(../../../images/button.jpg) no-repeat; text-align: left; vertical-align: middle; padding-top: 3px; padding-left: 24px; width: 100%; height: 25px; display: block }

This style for my navigation creates text that is #947175 in color, bold, 11pixels tall, without an underline, a background image, text alignment left, vertical alignment middle, with 3 pixels of padding on top of the text, and 24 pixels of padding on the left of the text, and it has a height of 25 pixels. Now let's break this down.

The first things in this list are pretty recognizable, color weight and height of the text. Next we are asking for our text link to have a background image (the one displayed above). Now if we were to use this style, as it is now the text of the link would appear over the gradient square on the left side of the image. We need to move the text over to the right by adjusting our style. We are going to add some padding to the text to move it over and position it correctly over our button background image. The next part of the code adds padding to the left of the text by 24 pixels, this is the amount determined by the image we are going to use for the button. We also need to move the text down so that it looks like the text lies on the bottom of the inner gradient. We add 3 pixels of padding to the top to create this effect.

Now we have a button that looks as if it were created using something like Photoshop, but it really is just text over a background image. To a search engine it sees the text of our link and can potentially increase our keyword density for that phrase. When a search engine encounters a button image, it has no way of knowing what that image is. It has no way of knowing that the image you use for a button to go to your contact page is a contact button.

We have the normal state, and we want to enhance our navigation with an over state. If you notice from our image above has a second version attached to the bottom of it. This is going to be used to create that over state. Here is the code for our example:

a.mainlevel:hover { color: #767676; text-decoration: none; background-position: 0px -25px }

This code will make the text a different color #767676, and it is going to shift the background image up 25 pixels. This is how the button changes when you place your mouse over the button.

If you would like to see this example in action visit Phoenix Real Estate

*Note: This information is provided for example. All images and code are copywritten, and can not be used by others. If you would like help with this, let us know, and we can provide you with a quote.