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…
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 because 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 and hence 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>
Great and simple. I have been reading about this topic for a while but the examples were too complicated. Good job!
so simple, some others use in pixel background position rather than top bottom position
thanks really cool
Hi,
Thanks for sharing your tutorial, but it doesn’t work for me
You can take a look at my code here if you want to. Thanks!!
Very helpful tutorial. Thank you!
Hello,
When I use display:block; it stacks and wraps my objects. I tried using display:inline; instead but it doesn’t work in IE. What am I doing wrong? Let me know if you need the code I’m using.
thanks