CSS Rollover effect

Posted on 27. Jan, 2008 by tutorials007 in Archive 13,152 views

In this tutorial you will learn how to make an CSS rollover effect.
Most of you saw how this effect looks like. When you pass over a, in this case graphic button,
it changes shape,color,text…
You can use even a javascript to make this effect, but we will do that in CSS.

It’s not necessary to use a graphic object in this effect, but for purpose of this tutorial I will use a graphic button.
First, you need to create a graphic object which you will use for this effect. You can even use mine if you want to.

This graphic object contains 2 buttons which we will use as a normal state and mouse over state.
They are saved in one file.
Dimensions 80×50 pixels

Why do we use one graphic file instead of two?
Well, if you use two graphic files, one for each state (mouse over, normal), this effect gets a bit slower cuz one graphic, which shows as a normal state
loads at the first page loading, while the other graphic (mouse over state) loads when we pass with our mouse over our button.
This is not so practical.

But, if we use one graphic file with both states, it loads at the first page loading for both states. That’s why this is quicker, better…

Ok. Now lets start coding.

Insert this into your CSS file

#button a {   
display: block;   


background:  url(rollovergraphic.gif) top;   


width: 80px;   


height: 25px;   


}

#button a:hover {   
background:  url(rollovergraphic.gif) no-repeat bottom;   


}

Insert this where you want display the rollover button:

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

Let me explain CSS code:

#button a – our button will be a link so that’s why we define our button look like a link
display: block – makes it possible to click on the whole block of the element
background: url(rollovergraphic.gif) 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.

Check an example: rollover.htm

If you apply for the best education grants you can afford a fantastic education. All you have to do is prove that you can learn with great grades and solid references. Then you can work towards your online degree in web design while working a day job! Don’t just learn basic html become a web design professional!