Let’s learn how to create a rollover button without the need of
JavaScript. Yeap, that’s right! NO more complicated JavaScript, just
HTML and CSS. How come? Just use two background images and the “:hover pseudo-class“.

Let’s begin:


Using your program of choice create two button images and save them for web. (make sure they have the same size).
One is going to be the “Up State“, let’s name it: “button“. The other one is going to be the “Hover State“, let’s name it: “button_hover“.
Button Image Sample  button.jpeg

Button Hover Sample  button_hover.jpeg


Time to implement our Cascading Style Sheet! Attach a CSS file to your HTML page.

That’s all! Use your creativity to implement this technique to
navigation, images, oversized buttons, etc… Possibilities are endless!

Download Source Files