Using the inset/outset border styles is a quick and easy way to simulate a 3D effect. However, it's not your only option. If you don't like the standard effect, or you're bothered by the differences in browser rendering, then you can take control of the border colours to produce the effect you want.
Instead of using the inset/outset attributes of the border-style and letting the browser handle the actual colour rendering of each border, you can set the colours for each border individually with your style rules.
Figure B shows the results of using a style sheet that specifies the colours of each button side individually. The markup is the same as in Figure A. Here's the CSS code:
body {
margin: 0px;
padding: 0px;
}
div#buttonA {
margin-left: 50px;
}
div#buttonA ul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonA li {
list-style-type: none;
height: 30px;
width: 125px;
margin: 10px;
text-align:center;
}
div#buttonA li a {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonA li a:link {
color: #000000;
font-weight: bold;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonA li a:visited {
color: #000000;
font-weight: normal;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonA li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #777777;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonA li a:active {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
border-style: solid;
border-top-color: #333333;
border-left-color: #555555;
border-right-color: #BBBBBB;
border-bottom-color: #DDDDDD;
}
Despite the fact that this block of code is noticeably longer than the CSS code for the previous example, it's not that different. The difference is that we replaced the border-style: outset (or border-style: inset) rules with a border-style: solid rule, followed by rules to set the colours of each border individually (border-top-color: #DDDDDD, etc.).
With this technique, you have complete control over the colours of the sides of your buttons. This means that it's up to you to select the right colours to achieve the exact effect you're looking forâ€"and, you'll need to remember to swap the colours around to the appropriate sides to produce the depressed button look for the :active button state. The main advantages of taking control of these details are that you can set separate side and top highlight colours, and the final result is more consistent across all browsers.
Do you need help with CSS? 
1
Jon-Paul LeClair - 23/09/04
Ummm...why not use the "outset" border option?
It generally gets the job done quickly and you don't have to monkey around with coloring all the sides...
border : 2px outset;
then on :active you just use the "inset" option.
However..the :active pseudo class is problematic in IE....
» Report offensive content
2
Toby Mills - 26/09/05
ah, but if you want these buttons to work with a form then you must use javascript which is not accessibility friendly as some people may have Javascript turned off.
Is there any way to do this with buttons on input type="button" i wonder?
» Report offensive content
3
Andrei Sura - 01/12/06
Useful article.
About using this in a form...
I just used this in a form in a different way
Input field is hidden but is available via his label; advantage is that you can use accesskeys.
» Report offensive content
4
slartimitvar - 10/12/06
unfortunately neither of your border effects work on hover for IE7. I'm having the same trouble with my page and haven't yet found a solution other than this one for IE7 hover effects in general through using strict doctype.
http://www.bernzilla.com/item.php?id=762
» Report offensive content
5
JasonC - 15/08/07
One thing I noticed about these buttons is that they need some type of "onmouseout" feature for indecisive users. if you hover over them with the mouse, then left click to select it but do not release the left mouse button and move the cursor off the styled button on the page then they never return to the "unclicked" state like a normal html button element would.
» Report offensive content
6
sezer - 12/08/08
CSS "Cascading Style Sheets" Lessons
css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm
» Report offensive content