My favorite CSS coding to date is the CSS RollOver button. Elegant with a fast load, this simple trick makes you think why you used Javascript rollovers in the first place.

Navigation

1. Example and Files
2. Getting Started
3. Making the Button
4. Adding the Rollover Image
5. HTML Code
6. CSS Code
7. Making the Rollover Effect
8. Taking the Next Step

Example and Tutorial Files

• Finished Example
• Tutorial Files

If you do download the Tutorial Files, then skip ahead to the HTML Code part of this tutorial.

Getting Started

You need the following programs:

• Photoshop (or similar program)
• Text Editor (Crimson for PC, TextWrangler for Mac, both free)
• Internet Browser, preferably FireFox

Making the Button

Bust open Photoshop, and make a 150px by 50px document.

Next, design your canvas to look like a button. Try to take up as much of the canvas as you can, too. Here’s what mine came out to look like:

Now make sure to go to Image > Trim and select Top Left Pixel Color and hit OK. This will crop out all the leftover canvas around the button.

Ok, so you’ve got your button all ready, but with no rollover effect. Let’s do that next.

Adding the Rollover Image

While you’re still in the same photoshop document with your button open, lets make some room to add your rollover effect.

Go to Image > Canvas Size (or Command/Control+Alt+C) Under New Size, go to the drop down menu besides your width and set it to Percent. Now change your width from 100% to 200%. Before clicking OK, under the Anchor options choose the far left middle arrow. This way when the canvas width is doubled, your beautiful button will stay aligned to the left.

Now your document should look like this:

Make sure you have the same color background on both sides. Now you need to duplicate the button layers you have (not the background layer) and move them to the right side so they fit perfectly beside each other. Zoom in to make sure that the two identical buttons aren’t overlapping. Your result should look like this:

Now lets change that Rollover button which would be the one on the right. I’d suggest changing either the text color or maybe the background color. You could even add a layer-style to the text to give it some glow. Just make sure you only change the button on the right, for this is the button that will be revealed when the mouse hovers over.

Here is what my rollover button looked like:

Now you are ready to save! Save the image as a jpg into a new folder called css_rollover. Make sure you mark down the width and height of the button because you will need that later!!!

HTML Code

I know, I know, boring HTML, but don’t worry, I won’t go too much into it and I’ll just give it to you! First we’ll start with the basic HTML document information:

Then we’ll move onto linking the CSS sheet:

Now we’ll set up the CSS div for your button:

Here you have created your div structure for the button. The div “navigation” is going to hold all of your buttons for the navigation. The div class “button” is going to be the div that holds your button graphic. Notice the anchor tag (a href=) is where the link would go to direct the user to the specific page. We’ll just leave “#” for now for it will link to nothing. The “span class="hide"” is going to hide the text “Home” so it is not revealed unless your CSS sheet is disabled.

Now save your HTML file as rollover.html inside the same folder as your button.jpg, then make a new document. You can go ahead and save this as rollover.css. Now let’s work in that.

CSS Code

Inside of your rollover.css, we are going to need to call out the class “button” first. But, we can’t just call out .button, we need to call out the anchor tag within it as well. We’ll give it a background-image so the div actually displays the appropriate image. Also, we need to specify the width and height of the button.jpg. Remember, we only want to show half of the button, so take the width of button.jpg and divide it by two. We probably won’t end up with the same numbers but mine came out to 148px wide and 48px tall.

One of the KEY PARTS to getting your button to show up is to float it left by float: left.So this is how the code should look in the end:

We’ll also give the “hide” class it’s display: none to make the div invisible:

So let’s save this rollover.css document and test out your rollover.html page in a browser. Wow! You should see a big old, clickable button. If not, check through your code or use the Web Developer Toolbar to validate your CSS or HTML.

Making the Rollover Effect

You need to add the background-position code to your rollover.css to make the image shift when it is rolled over. You would apply this code to home_button a: hover. Basically you want to tell the button to shift to the right to show the other side (hover state):

Test it out! You should now have a full functional rollover button.

Taking the Next Step

Now you are free to make multiple buttons, change your background color, and do whatever you want to feel more comfortable with the tutorial. Thanks for reading.

Posted on Tuesday, March 6th, 2007 at 4:30 pm under Web Design, CSS, Tutorial, HTML.