Lesson UPDATED! How to create a rollover button

Download for PC
(Premium Only - read more)

Download for Mobile
(Premium only - read more)

Download lesson notes
(Premium only - read more)

Share

In this lesson we'll be explaining the steps involved in creating a rollover button and how to add it to a page on your site.

Please note, this lesson requires a basic knowledge of adding HTML code to your site.

Let's get started!

A rollover button provides an eye-pleasing option to your site as an alternative to a standard hyperlink. When a user hovers their mouse over the button image it magically changes - a great party trick to impress all your friends!

There are a variety of methods for doing this but the way we will describe it here avoids having to use Javascript (which some users block) and avoids the flickering you sometimes get with rollovers.

There are three aspects to this process:

1. Creating the image
   
2. Adding the HTML to the page
   
3. Adding some new styles to the CSS file
   

Step 1 – Create the image

What you need to do is create a single image that includes your button in its normal state as well as its rollover state.

So the final image will be exactly twice the height...

Enjoy this lesson? Save it, or Share it with the world!