Free Rollover Web Buttons

I've always liked rollover buttons. But it used to be that the only way you could get them to work was a lot of javascript, which I never cared to learn.

But now CSS has provided a pretty simple way of creating rollovers without a lot of trouble. So even I can figure it out!

Anyway, I'm replacing the links on all of my sites with rollover buttons. And all of the buttons that I use on my other sites will eventually be available here, along with a bunch that I create just for this site.

Rolling Over With A Twist

No, I'm not talking about a visit to the chiropractor. But those of you who are familiar with my stuff know that I don't travel on the beaten path (perhaps that's why I'm always lost).

I like creating stuff that's different. So I'm creating rollover buttons that match web backgrounds from one of my other sites (Quality Animated Backgrounds.com).

The button above is the first one I created that matches a background. If you hover over it, you'll see a miniature view of the background on this page. If you click and hold the mouse button down, you'll see the background in its actual size.

I haven't created any more of these yet, but will soon.

Animated Rollover Buttons

I haven't completed very many of these yet, but should have quite a few within a couple of weeks.

How These Rollovers Work

Place cursor here!

This is a button that I use in places where I have a long list of links, such as at my Gold Dust Animated Text Collection.

With these rollovers, the graphics aren't swapped. They're used as backgrounds, and the part of the background that's shown changes as you rollover it.

This image above is used to create the rollover effect above it.

When you hover over the button, the view of the image switches to the center part. And when you click on the button, the view switches to the bottom.

The code to get these rollover to work is the Rollover Code page. And you can find code used for multiple images on the Samples page.

I named the rollover buttons like the one above, "Plaque Type" (okay, I couldn't think up a better name). Anyway, they can be found here.