The traditional way of creating graphical buttons is using two gif images, one for the default and one for when the mouse cursor hovers over or clicks the link. One would have to use some javascript to show one image and then the second image when the link is being hovered or clicked.
CSS allows the creation of graphical looking buttons, but without using two separate images. Try using this tutorial to create your own graphical buttons using CSS. It basically uses background colors and borders to create a simple graphical button.
To make a graphical button where the button looks pressed when hovering, use the following two style definitions for a standard link, and a hovered link.
a:link.nav {
color: #FFF;
background: #00C;
text-decoration: none;
padding: 0.2em;
border: 3px solid;
border-color: #99f #008 #008 #99f
}
a:hover.nav {
color: #FFF;
background: #00A;
text-decoration: none;
padding: 0.2em;
border: 3px solid;
border-color: #008 #99f #99f #008
}
To use the above styles, you would write your links as:
<a href="/" class="nav">link 1</a>
The above style definition creates a button that looks like the following. Hover over the button to see the effect of the button being “pressed”.
link 1