Docstoc

How-To Making CSS rollover buttons

Document Sample
How-To Making CSS rollover buttons Powered By Docstoc
					How-To: Making CSS rollover buttons
Level: Intermediate. Published on 16 April 2007 in CSS

In this how-to, we'll show you how to create easy, search-engine-friendly rollovers, using
nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!



Rollovers are a nice way to add visual feedback to your website's buttons. As a visitor moves their
mouse over a rollover button, it changes to indicate that it's clickable.

In the bad old days of HTML, the only way to create a rollover was to use JavaScript to swap the two
button images. While this works, it does rely on JavaScript being enabled in the browser. It also adds a
fair bit of code bloat to the page, meaning longer download times, and more coding for you.

Thankfully, these days you can create a nice rollover effect using pure CSS; no JavaScript required!
Roll your mouse over this button, which is created using just HTML, CSS and a single image:

So how's it done? Well, it all centres around the :hover pseudo-class in CSS. Using this pseudo-
class, you can style a link both in its normal state and in its hover (rollover) state. By making the link a
block element and giving it a background image, we can turn the link into a button. We then simply
jiggle the background image around to create the rollover effect.


The button image
The trick to making this type of rollover work smoothly is to have both the normal and rollover images
stacked in a single GIF image, with the rollover state below the normal state. Here's our button image -
it's 107 pixels wide and 46 pixels tall:




On the one hand, this is slightly inconvenient as it means you have to use Photoshop - or a similar
image editor - to create a single image containing your normal and rollover images. You can't just grab
normal and rollover button images from somewhere and use them as they are. Of course, this is no
problem if you're creating your site design in Photoshop anyway.

On the other hand, this approach avoids issues with flickering and preloading, which we'll talk about in
more detail at the end of the article. It's also nice, in a way, to have both the normal image and the
rollover image packaged within a single image file; it's easier to keep track of your button images, and
you only have half as many image files to worry about!


The markup
The HTML for our button is wonderfully simple. In fact it's just a link with an id, and a span element
wrapped around the link text:
<a id="emailUs" href="#" title="Email Us"><span>Email
Us</span></a>

We give the link an ID - in this case, "emailUs" - which allows us to style the link via our CSS. We
also place the actual link text inside a span element. This means that we can hide the link text with our
CSS and display the image instead, yet the link still looks like a regular text link to browsers not using
the style sheet - such as a search engine spider or a text-only browser, for example.


The CSS
To turn our regular text link into a rollover button, we apply the following CSS:




#emailUs


{


    display: block;


    width: 107px;


    height: 23px;


    background: url("emailUs.gif") no-repeat 0 0;




}




#emailUs:hover


{


    background-position: 0 -23px;
}




#emailUs span


{


    display: none;


}

First we change our emailUs link from an inline element to a block element with display:block.
This allows us to give the link a width and height, as well as set our button image as a background. We
set the width of the link element to the width of our GIF image, but we set its height to half the height of
the GIF; that is, the height of one of the button images. This means that just the top, normal button
image appears within the link by default. The bottom, rollover button image is cut off, and therefore
remains hidden.

Then we select the link's :hover pseudo-class to style our rollover state. This is simply a matter of
shifting our background GIF up by 23 pixels, or half the GIF's height. This hides the normal button
image above the top of the link element, and reveals the rollover button image within the link; you can
think of it as sliding the GIF upwards within the "window" of the link. When the visitor moves their
mouse away from the link again, the button GIF slides back down 23 pixels, returning to its default
position, with the normal button image revealed within the link.

Finally, all we need to do is set display: none on the span element inside the link, hiding the link
text for browsers that support CSS and images.

And that's all there is to it!


Creating more than one button
If you want to create many rollover buttons in the page - for example, as part of a menu - copy and
paste the HTML and CSS, giving each button a unique id in both the HTML and the CSS and, of
course, changing the background image for each button in the CSS.

Alternatively, you could style the link text to be in the centre of your button image, rather than being
hidden; you'd then only need one (blank) button image for all the menu options. The tradeoff with this
approach is that you lose some control over the look of your button text, and the buttons don't
generally look as nice.


The rationale
You may be wondering why we've taken the approach of having both the normal and rollover images
within the one GIF image. In fact you could easily rework the CSS to include two separate images, as
follows:
   #emailUs


   {


       display: block;


       width: 107px;


       height: 23px;


       background: url("emailUsNormal.gif") no-repeat 0 0;




   }




   #emailUs:hover


   {

       background: url("emailUsRollover.gif") no-repeat 0 0;


   }

What you'll find, though, is that the button "flickers" the first time you move the mouse over it, as the
browser fetches emailUsRollover.gif from the server. In other words, most browsers don't
preload the background image of the :hover state. By combining both our normal and rollover states
in a single GIF, we're forcing the browser to "preload" the rollover state image as it fetches the normal
state image.

An alternative approach might be to use a JavaScript preloader, or a hidden img element in the page,
to preload emailUsRollover.gif, but then we're kind of losing the point of having a non-
JavaScript, pure-CSS rollover!

A nicer alternative is WebCredible's Trifecta button. This uses an inline img element in the markup for
the normal state, and a background image in the CSS for the rollover state. To create the rollover
effect, it toggles the visibility of the inline image. This means that both images are preloaded with the
page, avoiding any flickering effects. It also uses markup to display the button text - a technique that
we touched on earlier - meaning that you only need one button image pair for a whole menu.

The drawbacks with the Trifecta button are, firstly, that it requires an extra div wrapped around your
link, and secondly, that you end up with an inline image in your markup. Having an inline image means
more markup, and also means that you're fairly committed to having image buttons on your site; it's
harder to replace your image rollovers with pure CSS versions, or with simple text links, later.
However, the Trifecta is a nice solution if you like the idea of separate rollover images.

There's one gotcha with the single-GIF approach, and that's when using our old friend, Internet
Explorer 6. If you have this browser set to always fetch files from the server (Tools > Internet Options >
Temporary Internet Files > Settings > Check for newer versions of stored pages: Every visit to the
page), you'll get horrid flickering each time you move the mouse over the button.

Luckily, it tends to be mainly Web developers that have this setting enabled; most visitors leave IE6 at
its default setting of "Automatically".

Microsoft fixed this problem in IE7. Also note that the Trifecta button doesn't suffer from the problem in
IE6.


The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further
help, check out our online Help Forums, where you can get assistance from members of Elated and
other webmasters.

If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!

                                               Top of Page

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:12
posted:4/20/2010
language:English
pages:5