Image Rollovers with CSS

rssfeed.jpgWithout the hassle of annoying javascripts, we will create an image rollover for a button. This button uses something called the “Slide door Technique”. Which is very efficient for anyone trying to make their site load faster, and keep everything clean and easy.

For this tutorial we will be using the follow image for a RSS Feeds button:

rss-feed-img.png

Notice how it is only one image, with both Off states, and Hover states.

Lets get started with the code, below is the CSS we will be using.

Notice for the hover, we change the backgrounds position to -44px, this moves the background so it shows only the hover state when hovered on. Now for the HTML code.

In this HTML code we simply apply the class “button” to the anchor. We use a span tag inside of the anchors so that we can hide the text.

Thats it! a simple image rollover uses a couple lines of simple CSS, this is very helpful for layouts with navigation that requires image and such. You can view the demo here, and download all the files used here, thanks for reading!


1 Star2 Stars3 Stars4 Stars5 Stars (16 votes, average: 4.31 out of 5)
Loading ... Loading ...
Posted on January 2nd, 2007 by Kasted under Links

26 Comments

Post a comment

  

Search



Categories



Get Your Site Submitted for Free in the World's Largest B2B Directory!

*Mandatory Field
*

*