FunkyTower » HTML

How To Make Rollover Buttons Using CSS

David — Wed, 13 Aug 2008 08:22:46 +0000

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:

Navigation Bar with Buttons Example!







Page 1 Page 2 Page 3 Page 4 Page 5

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 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 tags class is “nav” as well, to apply the button and edit the text.

We are linking to an external CSS file, hence the 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:

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

Making a navigation bar in CSS

David — Wed, 13 Aug 2008 02:25:06 +0000

CSS is such a useful tool in designing your website and adding some functionality to it. One of the things that turns most “beginner web designers” on to CSS is the ability to customize the color of links. This is great to avoid having unwanted underlines and the ugly blue default link color. Well did you know you can create a very versitile navigation bar using CSS? It’s really quite easy: instead of applying effects to a piece of text – apply effects to a table cell! In this tutorial you will learn effects regaurding: hovering cell background effects, text effects, button effects, and more!

Step 1 – Creating the table:

The first thing we need to do is set up our table. I’ll make it easy for you and create a verticle, 5 collumn table. You can customize this table any way you’d like. You can convert it to 5 rows instead of five collumns if you prefer having a side bar.

Open up Notepad or a text editing decoder similar to notepad and create a basic HTML document with a table like so:

Your Website Title







Page 1 Page 2 Page 3 Page 4 Page 5

Again, you can modify this table in any way you need to. The only thing I suggest NOT modifying is the font, alignment, or size of the text – and do not be quick to add links to your navigation bar. We’ll cover this in the next step.

But first, be sure that you’ve saved your work. For now, save this document as “navigationbar.html” and continue saving your work after each step – just to be safe

Step 2 – Making our links

Instead of using the common tag, we’re going to go a different route. Because we want the entire cell to act as a button or link, we need to modify the entire cell, not the text within it. To do this, we’ll add a function called “onClick” inside each tag.

To do this and find each tag and add this function: onClick=”document.location.href=’http://www.funkytower.com’;”

Now all your tags should look like this:

    Page 1
    Page 2
    Page 3
    Page 4
    Page 5

Change the URL to whatever you’d like it to be so that it fits the purpose of your navigation bar.

Step 3 – CSS Properties for each button

Now that we have a dull navigation bar with no style or beauty to it, let’s work on our CSS. Let’s first start by making our navigation bar look just how we want it. Paste this code somewhere between the and tags:

Let’s break this down:

.nav – This is the name of the class we will use. Change it to anything you want like “.navbar” or “.thebar” or “.thethingie”…what ever you want
background-color – This, obviously, will be the background color of our cell. Change the color to whatever you’d like!
font-family – This is your basic font for your text. There are different font-families you can use. Here are some common ones1. Verdana, Tahoma, Arial, Helvetica, sans-serif
2. Georgia, Times New Roman, Times, serif
3. Geneva, Arial, Helvetica, sans-serif
4. Arial, Verdana, Helvetica, sans-serif
5. Courier New, Courier, Verdana, sans-serifNow, you can go online and find more fonts families, but these here are the most common – so if I were you, I’d stick to one of these.
color – Simply put: the color of the text. Again, this can be anything you want.
text-align – The alignment of the text. Chose left, right, center, or justify.
cursor – This is what the cursor becomes when it is within the table cell. The “cursor: pointer;” property will help indicate that the cell is, in fact, a link to another webpage by showing And it also will keep your cursor from turning into when hovering over the text in your navigation bar.

So now that we understand the basic properties of our CSS code, it’s time to add some effect to our navigation bar!

Step 4 – Adding Effect:

To do add a hover effect to your navigation bar, add the following code to your CSS style:

.nav:hover {
background-color: #CC0000;
}

“.nav:hover” indicates that we’re using the same properties as “.nav” except for the following properties (i.e, these are the properties that will change when we hover our mouse over the table cells in our navigation bar)

Note that the only property I’ve put here was the background color. You can use/change whatever property you’d like such as ”color” for text - just ommit the “cursor” property, as it won’t matter since we covered that in the previous CSS properties.

Step 5 – Implimenting the CSS to the Navigation Bar

This step is probably the easiest step. Simply add class=”nav” within your tags. Now your ENTIRE HTML document should look something like this:

Untitled Document







Page 1 Page 2 Page 3 Page 4 Page 5

Step 6 – Save it and Test it!

Upload it to your server and test it out. Now you have a fully functional navigation bar done completely in CSS! Final thing to do is test it out!!!

Other Tips:

Now, this is totally optional, but I would reccomend adding your CSS to an external CSS document, rather than adding the entire CSS code to the head of your HTML document.

To do this, copy and paste all the CSS code (excluding ) into a new notepad document and save it as style.css in the same location as your HTML document.

Now, open up your HTML document and replace ALL your CSS code, including the