How To Make Rollover Buttons Using CSS
Have you ever wanted to make fancey buttons that do stuff when you put your mouse over it, but don’t want to mess too much with javascript, and you just can’t afford flash? Well, there’s an easier way to do it and it’s called CSS. You may have noticed other articles pertaining to CSS here at FunkyTower, and if you’ve read them, you’ve realized how easy it is to use CSS. All it takes is a little push into getting started. So if you want to make fancy buttons for a navigation bar, well here’s the tutorial:
Woah hold on now, for this tutorial, you have to see it for yourself. So, I’ve gone ahead and made a small navigation bar that you can download and observe for yourself. Click this link to download it: buttons.zip
Once you’ve saved it and extracted the files, we can get started!
Step 1: Creating the buttons:
As you can see inside the folder, we have 2 images:
1.jpg
2.jpg
1.jpg is going to be the button’s original appearance; 2.jpg is what you will see when the mouse cursor is hovering over the button. Note that there is no text: the reason is that we will use text in our HTML document and modify it with our CSS document.
In order to create buttons, start by creating one image that you think would look best as a button. Save the image as “1.jpg” Then, modify it to how you want it to look when the mouse cursor is hovering over the button, then save it as “2.jpg” It is important that the overall image size does not change when saved. Both of these images are 100 pixels wide and 34 pixels in height. We must know the size of our images as it becomes greatly important in the overall product of our buttons.
So now we have 2 button images saved in one directory
Step 2: Creating the HTML Document:
This step is easy. Create a n HTML document with a link, and save it to the same directory as the button images, and name it “navbar.html” for now. That’s it. In this case, I wanted to show you how a navigation bar might look using the button – so I made a table of one row and 5 collumns with no size defined in the HTML, and put one link inside each column. The reason I didn’t define a size in the HTML is because we will define the size in our CSS.
The HTML code you should have in the navbar.html file, that came with the buttons.zip file that you downloaded, should look like this:
<html>
<title>Navigation Bar with Buttons Example!</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head><body>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td class=”nav”><a href=”navbar.html” class=”nav” >Page 1</a></td>
<td class=”nav”><a href=”link.html” class=”nav”>Page 2</a></td>
<td class=”nav”><a href=”link.html” class=”nav”>Page 3</a></td>
<td class=”nav”><a href=”link.html” class=”nav”>Page 4</a></td>
<td class=”nav”><a href=”link.html” class=”nav”>Page 5</a></td>
</tr>
</table>
</body>
</html>
There are a few things to note in this code that you must do to your OWN code, if you are making your own HTML document.
- The <td> tags class is “nav”: This will be the name of the class we will be editing in our CSS document to modify the table cells.
- The <a> tags class is “nav” as well, to apply the button and edit the text.
- We are linking to an external CSS file, hence the <link href=”style.css”….> tag. Using external stylesheet(s) should become a common practise for you, if it isn’t already. Be sure that if you are making your own HTML document and CSS document from scratch that the “style.css” corresponds to a local stylesheet called “style.css” just like in the buttons.zip file that you can download.
Just in case you don’t know by now, “class” is like a name that can be identified on different things. The CSS document will have these names in it, and “class” calls the names to function in the HTML document.
Step 3: Creating Our CSS document:
Using notepad, type in your CSS code.
If you’re following along with the buttons.zip file, here is our CSS Code in our CSS document:
a.nav {
font-family: Helvetica, Arial, sans-serif;
color: #FFFFFF;
text-align: center;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 34px;
width: 100px;
font-size: 16px;
padding-top: 7px;
text-decoration: none;
display: table;
}a.nav:hover {
background-image: url(2.jpg);
background-repeat: no-repeat;
background-position: center top;
}td.nav {
height: 34px;
width: 100px;
}
Let’s break this down.
FIRST SECTION: “a.nav”
The main properties of the button
- font-family: this will be the font you choose for your text.
- color: this is the color used for your text only
- text-align: this is the horizontal alignment for your text; it can be left, right, center, or justify.
- background-image: the url of the button we want to appear when you first load the page.
- background-repeat: leave this property as “no-repeat.” If you change it, the picture could repeat itself, destroying the whole design of your button.
- background position: leave this as it is too, this will center your image and align it to the top of the table cell, leaving it looking nice and clean.
- height AND width: these properties MUST match the size of the button images!!!
- font-size: however big or small you want your font; it is best you choose a font that will leave the text fitting inside the button.
- padding-top: this is the ammount of space from the top of the table cell in which your text will appear. In this case it is being used to put the text right in the middle of the button.
- text-decoration: change this to whatever you want. I chose “none” so that there wouldn’t be an underline when we first see the button. I personally find the underlines, typically, to be tacky.
- display: I chose “table” because this causes the background to be displayed throughout the entire table cell.
SECOND SECTION: “a.nav:hover”
This is what we want the button to do when we put our mouse cursor on top of the button. Because we’re only working with the button, I changed only the properties of the button image. You can change the properties of the text, too, if you’d like.
- background-image: the url of the button image we want to appear when we put our mouse cursor over the button.
- background-repeat: same as above
- background-position: same as above
THIRD SECTION: “td.nav”
The properties of the table cell – we only need to adjust the table cells size. This is really only needed if you put the button inside a table cell to use as a navigation bar. If you’re not making a navigation bar or putting your link/button in a table cell, you can skip this section.
- height: This is the table cell’s height which MUST match the height of our button images.
- width: This is the table cell’s width which MUST match the width of our button images.
These are ALL the properties we need to complete our CSS document for our button. Save this CSS document as “style.css” As mentioned before, we are linking to a separate stylesheet called “style.css” and this will be that stylesheet. Save your stylesheet to the same folder/directory as your button images and HTML document.
Step Three: Testing
Now, if you’ve followed along properly, you should have 2 button images, an HTML document with one or more links, a CSS document covering the specs of our button, the specs of our button when we hover our mouse cursor over it, and (if you’ve chosen to make a navigation bar using a table with table cells) specs on the navigation bar’s table cells.
If so, open up your HTML document (navbar.html) and see how it looks. If you coded the CSS and HTML properly, then it should look just right! If your button doesn’t look right, make sure you defined the size of your images in the CSS documents properly – and that they are the same.
If your button doesn’t work, double check to make sure you identified the classes properly in the HTML document, and that the images’ URLs are correct in your CSS document.
Extra Tips:
If you want to change the font-color, font-weight, and text-decoration during your hover effects, be sure you define the way you want your text to look using these properties in both “a.nav” and “a.nav:hover” If you don’t, you could confuse some browsers and your button won’t work properly.
If you want to use crazy text font, instead of a common text font – apply that font to your button images, NOT the HTML document. When you do your HTML document, simply type a space for a link, like so:
<a href=”link.html”> </a>
In doing this, you won’t have to worry about any text properties in your CSS document.
If you are copying and pasting code from this page into notepad, this could sometimes cause a negative effect: the best thing to do is download the buttons.zip file and work with that. It is always best so hand-type the code. If you use dreamweaver, use “auto-html” features, or hand type the code. This ALWAYS works best.
That’s it!!! Now you have a functioning button and/or navigation bar with a rollover image effect! Pretty neat, don’t you think? AND it was easy!!!
What Do You Think?
Was making a roll-over image type button with CSS easy? Did you try this out and couldn’t get it to work? Did you use this method on your website? If you did, I wanna see it! Let me know if you have any questions or comments about this tutorial, and I’ll be happy to get back to you! Send me an e-mail at david@funkytower.com, or leave a comment below! 
Take it easy,
David Crandall
Tags: Bar, Buttons, Change, CSS, Cursor, Help, Hover, How To, HTML, Image, Images, Mouse, Navigation, Over, Roll, Tutorial
March 26th, 2009 at 11:24 am
well i tried – downloaded and changed only the images
and it doesn’t work
tried in every way possible and still doesn’t work
i checked a recheck and nada
i can see the the first image for the example
took playnow.png
then in the rollover
put an animation button
playnowover.gif
with every over pic its working but not in gif
do you have anything to suggest
many thanks in advance
March 26th, 2009 at 5:13 pm
Yose, please give more information when asking for help. Please provide your CSS and HTML code and I can help you.
April 24th, 2009 at 1:46 pm
Do you have any hack for IE6/IE7? My buttons becomes small in IE.