How to create rollover buttons using only CSS (no Javascript)

As part of my work, I analyse existing websites developed by other people. These websites are often (though not always) greater than 3 years old. However, it constantly amazes me how many new websites continue to use old HTML/Javascript methods for creating buttons with rollovers. There IS a better way!

The method I learned several years ago doesn’t use Javascript. Instead, it uses pure CSS to create the buttons and the rollovers – all that is needed is a little knowledge of CSS and how the background property can be used on various elements.

When I create a website, I invariably create my menus as unordered lists. I”m going to show you how this is done, and how elegant menus can be created in this way.

STEP 1: The HTML
First, you need to set-up the menu in the HTML.
In the HTML, I did it this way:

<div id="nav">
<ul>
<li id="home_button"><a href="/"><span class="hide">Home</span></a></li>
<li id="about_button"><a href="/about"><span class="hide">About</span></a></li>
<li id="services_button"><a href="/services"><span class="hide">Services</span></a></li>
<li id="clients_button"><a href="/clients"><span class="hide">Clients</span></a></li>
<li id="blog_button"><a href="/blog/"><span class="hide">Blog</span></a></li>
<li id="contact_button"><a href="/contact"><span class="hide">Contact</span></a></li>
</ul>
</div>

I chose to use <ul> and <li> for Accessibility purposes, but you could equally use <div> tags in place of the <ul> and <li> tags.
Notice also the use of <span class=”hide”>Contact</span>. We”ll come to this later, in the CSS.

I set up a containing div with an ID of “nav”, then created the menu as an unordered list within the div.
I then created the list items, each with a unique ID. This is so we can apply a specific background to each list item. We”ll come back to this later, in the CSS.

STEP 2: Creating your buttons
Now you need to create your buttons in Photoshop or whatever graphics package you prefer to use. For each button, you need to create an ”off” state and an ”on/rollover” state.

On our website, the buttons are very simple – each of the buttons is black, and rolls over to blue. I created the graphic in Photoshop as follows:

As you can see, the ”off” state of the button is in the top half of the graphic. The ”on/rollover” state is in the bottom half.
So this is going to be the background for the list item with id=”about”.

Once we have all of our buttons ready, we can move onto the CSS.

STEP 3: The CSS
Here’s the CSS for the UL and LIs belonging to the enclosing DIV ID=”nav”:

#nav ul { list-style:none; }
#nav ul li { float: left; }

And for each DIV:

#home_button a { float: left; display:inline; width: 69px; height: 40px; margin: 0; background: url(../images/home_b.gif) no-repeat; background-position: 0 0; }
#home_button a:hover { background-position: 0 -40px; }

What this basically does is set the background of the A tag within the <li> with id=”home” to the graphic I showed you above. It also sets the position of the background image to its top-left corner.
Then the a:hover rule tells it to change the position of the background-image to the top-left corner of the rollover part of the graphic.

Here’s how we work this out:
We use Photoshop to work out the coordinates. We know that we”ll always be aligning to the left of the background image, so we only need the top coordinate.

I use the marquee tool to measure the height from the top of the graphic to the top of the rollover section. This height gives me the ”top” coordinate for the a:hover”s background:

In this case, the height is 39 pixels.

We also used <span class=”hide”>About<span> (or relevant text) inside each of the tags above. I set up a class in the CSS called .hide which hides the button”s text from view. This is so the text doesn’t show up over the button, which can look messy if you’ve flattened the text onto the graphic itself, as I have.

The code I used to do this is simply:

.hide { display: none; }

STEP 4: Testing
Now go back to your page (having saved the HTML and CSS documents of course), and refresh it. You should see that the ”home” button is showing the black part of the button graphic only.
When you roll over the button, it should turn blue – that is, it should display the blue part of the button graphic.

Repeat for each of the buttons you wish to create.

That *should* be it. If it doesn’t work for you, check the div IDs match what you’ve set in the CSS, and check you have the co-ordinates of the rollover part of the graphic.

Good luck!

Previous post:

Next post:

OUR SERVICES

  • Logo and branding design
  • Web design and development
  • Wordpress and Thesis development
  • Bespoke and open-source e-commerce solutions
  • E-marketing
  • Search Engine Optimisation (SEO)
  • Stationery design and print

Read more...

TESTIMONIALS

"Choosing a suitable website is not an easy decision. CK Services were very responsive and helped us in making the right decisions and we are delighted with the results. We have received lots of compliments from customers and feel that the site has enhanced our business."
Trevor Black, Blackwolds Consultancy

"CK Services provide us with all our web development on an ongoing basis. They have a wealth of experience which has saved us so much money on wasted exercises over the years. I wouldn't use anyone else for my website development"
Viviane Morris, Much Loved People.com

"CK Services have delivered not only an attractive and effective website but subsequently a fast, efficient and very friendly customer focused support service. They never tire of our lack of technical knowledge and are always keen to resolve all our requests."
Julie Gough - Mapping Solutions

"The web package I chose was really affordable for my small business. CK Services undertook the site design, hosting and search engine optimisation. I chose a template and images, wrote the page content and they did the rest. The web design is technically very good, the layouts and drafts were produced very quickly and all changes that I requested were undertaken promptly. "
Ebby Yarrow - Yarrow Safety

"CK Services gave good advice and listened to my requirements before recommending a number of web site designs to choose from. Once one was choosen they worked hard to set it up exactly how I wanted it. I found them to be friendly, reliable and very helpful and I would strongly recommend them to anyone in the future."
Richard Reah - North of England Bonsai.

"CK Services have been very professional and extremely prompt with their service. I wanted a very personal website to suite my new holiday cottages and after asking a few companies, CKS was the only company which had imagination enough to help me. They were open to my ideas and also gave a lot of well-needed input. Fantastic people to deal with, I would highly recomend them to anyone and everyone!"
Jessica Barker - Thief Hole Cottages.

"CKS responded very well to our needs, fully understanding what we were trying to achieve. I asked them to design our new logo and they very patiently worked with us until we got it just right! We've also used CKS for printing our business cards and letterheads and again very pleased with the quality and response we've had."
Mark Sanchez-Garcia - The Sanchez-Garcia Partnership.

"It's been brilliant working with CK Services again. They are great at finding swift solutions to tricky technical issues and I'm particularly impressed that they created everything we needed by my very short deadline."
Julie Gough - Marketing and Communications Manager, Wildlife Trust for Sheffield and Rotherham.

FROM THE BLOG

PSD to HTML5

HTML 5 is here. It's the 5th major revision of the HTML coding language which is used to create all websites. We're pleased to offer a PSD to HTML5 conversion service. We have years of experience i ...

Read more...