Lime. Creative Blog by Peeke Kuepers.

Creating A Rollover Button With HTML/CSS Only

As you will probably know, Dreamweaver offers the functionality to add rollover buttons to your site in a few clicks. As easy as this method may be, there are a few reasons not to choose for this approach.

The build in rollover button in Dreamweaver relies on Javascript. Though 9 out of 10 users have their Javascript enabled, you shouldn’t use it if it isn’t even necessary. I found a much more simple and elegant solution using only HTML & CSS. An extra advantage is that you don’t have to pollute your markup with code like this:

Which nobody understands anyway!

So let’s get started! First add a link to your mark up like this:

Now we need to transform the link into a button using CSS:

You may have noticed the button has no rollover and active state yet. Let’s add them:

That works! Now there’s only one small problem left: the browser usually doesn’t preload the background images for the pseudoclasses. So we’ll need to tell the browser to preload the images ourselves. We’ll be using one last bit of css to do this (credits to thecssninja.com):

Correction: you need to add height: 0px; to prevent that your body get’s extended by the height of the preloaded images.

That’s all! You’ve created your own HTML/CSS only rollover button! A live example of the buttons can be found here: www.peekekuepers.nl/kinderspel

*In this tutorial I used the id property of the <a> tag. You can also use the class property if your buttons are not unique, they have the same background. In this case you probably don’t want to hide the text from the link either. You can vertically position the text within the button using padding-top. Remeber that if you define a padding-top of 4px, you need to decrease the height of the button with 4px as well. 

Also, it isn’t by any means necessary to add a background image to the button, you can also use a background color!

If you think this tutorial was useful, please consider sharing it with your friends/colleagues. Thanks!