When designing a website, you may want to use your own custom made buttons. However, in the older days, you would write a lot of HTML code just to get the rollover to work. Sometimes, it wasn’t even worth the trouble. But with the new days of CSS – life is much easier. This tutorial will describe, and show you how to do a rollover effect with using CSS. This would be perfect if you have an image gallery in your website, menu buttons, or whatever you decide to use it on. Most of you know what this would be like when doing normal text, but with an image, you can do just about anything.

First, you need to create a graphic that you want to use. You may use mine if you wish.

This graphic contains the original state, and the roll over state in one image. The total size of this image is 80 x 50 Pixels.

Why is this better than two images?
If you use two images, then the website needs to load both images. Whereas in this example, when the website loads, it loads the entire image, but only shows the original state, not the roll over stats.

Here is the CSS – put this in your stylesheet.

<style>
#button a {display: block; background:  url(http://www.mattginsberg.net/blog/wp-content/uploads/2009/07/113.jpg) top; width: 80px; height: 25px; }
#button a:hover {background:  url(http://www.mattginsberg.net/blog/wp-content/uploads/2009/07/113.jpg) no-repeat bottom;}
</style>


Let’s look at the CSS:

+ #button a – our button will be a link, therefore we use a
+ display: block – makes it possible to click on the whole block of the element
+ background: url(http://www.mattginsberg.net/blog/wp-content/uploads/2009/07/113.jpg) top – our rollover graphic
+ width: – width of our object
+ height: – height of our object, but only for one state, that’s why it’s 25 pixels.

Put the following code in your document to place the roll over button:

<div id="button"><a href="#"></a></div>

Test it:

HELP SPREAD THE WORD!

Related Posts

• Tutorial: Coding the Apple’s Navigation Bar (Part 2 of 2)
• Tutorial: Design the Apple’s Navigation Bar (Part 1 of 2)
• Tutorial: Draggable Div with Open and Close Links.
• Tutorial: Draggable Div