Make Rollover buttons using CSS
Article ID: KB101543
See Printable PDF version of this tutorial...
Imagine being able to upgrade your navigation by simply adding a
new HTML link to a table cell or layer without creating new images
and modifying JavaScript code! With this technique, you can
use rollover images as buttons and update them by adding simple
hyperlink code... all done with Cascading Style Sheets.
Here's how:
- Go to your documents folder and make a new web folder called "css_navigation."
- Open up your text editor (such as Windows NotePad).
- You may be already acquainted with the
a:link a:hover style rules.
They allow your hyperlinks to have a different color when the mouse
pointer is floating over them. We are going to use CSS to expand on
this a little.
- In your text editor type this code exactly as it appears here:
p.navbuttons a {
color: #000000;
text-decoration: none;
background-color: #A2AAB5;
display: block;
padding: 3px 0px 3px 12px;
width: 150px;
border-top: 1px solid #EEEEEE;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #EEEEEE;
background-repeat: no-repeat;
}
This class defines the way that your link will appear in its
"upstate" (untouched by the mouse pointer).
You will see what each of the things in this class does later
when you preview your page in the browser.
- Carriage-return and type this next:
p.navbuttons a:hover, p.navbuttons a:active {
background-color: #333333;
color: #FFFFFF;
background-repeat: no-repeat;
}
This Class sets the rules for the way the browser will show the
buttons in their "hover" or mouseover state as well as
their "active" state (the "active" state is when the user clicks
on the button).
- Now go to File > Save as and save this file in your web
folder as "stylesheet.css."
- Now make a new HTML document. If you are using NotePad or a different text editor, type this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html>
< head>
< title>My CSS Navigation</title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
< /head>
< body>
</body>
< /html>
- Go to File > Save As.. and save this document as "index.htm" in the
same folder as the CSS document you made.
- What we are going to do now is link your external style sheet (stylesheet.css)
to your newly created HTML page in order to make the rules you just
created apply.
You are going to use this code to link it:
<link href="stylesheet.css" rel="stylesheet" type="text/css">
Here is where it will go:
< html>
< head>
< title>My CSS Navigation</title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
< /head>
- Now we are going to add a hyperlink to that same page, just
to see how things are going. Add this somewhere between
<body> and
</body>:
<p><a href="anypage.htm">your link text</a></p>
- Preview it in your browser... NO CHANGE!!
- The reason for this is that you have not told the browser to
apply your style sheet rules to this link.
- It's easy to fix this - change the link code so that it is commanding your
browser to display your link as you have decided it should be:
<p class="navbuttons"><a href="anypage.htm">your link
text</a></p>
- NOW LOOK! You should have a page with what
looks slightly like a navigation button that changes when you put
your mouse over it? Yes? Hope so!
Taking it a step further... Add Images!
Instead of only having plain old solid colors, why not use a
graphic? It's easy:
- In the
p.navbuttons a class add a line like this that links to
your upstate image:
background-image: url(yourupstateimage.gif);
Your p.navbuttons a class will look like this:
p.navbuttons a {
color: #000000;
text-decoration: none;
background-color: #A2AAB5;
display: block;
padding: 3px 0px 3px 12px;
width: 150px;
border-top: 1px solid #EEEEEE;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #EEEEEE;
background-image: url(yourupstateimage.gif);
background-repeat: no-repeat;
}
- Then for your mouseover state, add a slightly contrasting
image to the
p.navbuttons a:hover, p.navbuttons a:active class,
like
this:
p.navbuttons a:hover, p.navbuttons a:active {
background-color: #333333;
color: #FFFFFF;
background-image: url(yourmouseverimage.gif);
background-repeat: no-repeat;
}
This technique should work in all but the older browsers like
Netscape 4 and the MS explorer versions of the same era. In older
browsers, even though the button will not render with the rollover effect, the links remain active and legible.
This tutorial was provided by Gordon Mac from
gmaq.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101543.htm
permalink to this article:
http://www.pixelmill.com/support/kb101543.htm
Back to top