Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Beveled Button Effect

What is the best way to do this?

4:00 pm on May 10, 2003 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I've been working on a few new sites where my goal is to minimize the use of graphics for button effects. Thanks to tedster, Nick_W and a few others, I've been able to effectively create that Beveled Button Effect using pure css.

When it comes to creating the beveling effect, what is the best way to achieve this? Right now I am using the border outset attribute and it looks great in IE. Just checked it out in Opera 6.05 and it does not look as I expected. I am familiar with all of the border attributes and was wondering which one, or combination thereof would be the best way to create the beveled effect. My current css looks like this...

#menu a{
border:1px outset;
#menu a:hover{
border:1px outset;
#menu a:active{
border:1px outset;
2:46 am on May 20, 2003 (gmt 0)

10+ Year Member

I'm not certain whether or not to post this here, but I would like to point out a fairly simple DHTML in-line fashion of making a button-like link:

<table border="0" cellpadding="3" cellspacing="5" width="35px">
<td valign="top"
style="cursor: hand; border: 2 outset #b0c4de; background-color: #b0c4de"
onmouseout="this.style.backgroundColor='#b0c4de'; this.style.border='2 outset #b0c4de'"
onmouseup="this.style.backgroundColor='#009cb5'; this.style.border='2 outset #009cb5'"
onmousedown="this.style.backgroundColor='#336699'; this.style.border='2 inset #0678C0'; document.location.href='http://mydomain.com/'"
align="center" width="20%"><a href="mydomain.com/"
title="blah blah">Link</a></td></tr></table>

Or am I totally out of the loop?

3:00 am on May 20, 2003 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Hello Intermagus, Welcome to WebmasterWorld!

Actually you are not out of line. My goal when developing the above menus was to rely solely on css for functionality. No javascript. Unfortunately many of the javascript type menus like this are not search engine friendly. I wanted to have a fully indexable, well planned navigation structure that used all the latest and greatest in css.

Oh, no tables either! We're trying to go tableless around here. ;)

<added>Just tested it out, not bad. But, it has to pass the Opera and Gecko test which it does not. The border attributes of outset and inset are not supported in many other browsers besides IE. I started my css menu using the same attributes and found that I had to declare all four border properties to achieve the beveled effect.

The method you posted appears to be SE friendly, that's cool.

6:45 am on May 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

The border attributes of outset and inset are not supported in many other browsers besides IE.

Pageone, Opera and Mozilla do support border outset and inset. I've used both extensively for a very long time.

Single pixel borders, however detract and may hide the effect. A minimum border size of 2px is recommended to highlight the effect. The same applies to the groove border style which requires at least 2px borders to display the faux 3d effect. I believe DrDoc mentioned this early in the thread.

Here is a good rule of thumb if you suspect IE has better CSS support than Opera or Mozilla.

Ahem, there are two types of CSS that MSIE suppports and Opera/Mozilla do not. #1 Propriety MSIE Styles (Opera 7 actually does support MSIE colored scrollbars) and #2 Malformed, misinterpreted CSS.

One other important item to consider when using inset, outset and groove border styles: certain colors emphasize the effect while others diminish or even obscure it. Trial and error testing is recommended to find the best border colors.

6:51 am on May 20, 2003 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Single pixel borders, however detract and may hide the effect.

I never did try anything beyond 1px when I was testing using the inset and outset. IE was showing them with the slight bevel that I was looking for, Opera and Moz were showing solid borders. Sorry for the misinformation above.

Test, test, test, test, test, test...

I'm tired of refreshing. I'm tired of not sleeping! ;)

7:15 am on May 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Lol, been there, done that.. got scarred knuckles to prove it.

Do try other colors as well.. you will be surprised by the differences.

7:30 pm on May 20, 2003 (gmt 0)

10+ Year Member

How about this approach. I modified the method found at A List Apart, which displays an unordered list as a vertical stack of buttons:


I changed the styling to create a beveled button effect, so we end up with a vertical stack of beveled buttons with a hover effect (color change) and an active effect (border changes width and color to simulate 'clicked' button).

This seems to work in IE 5.0Win, IE 5.5Win, IE 6.0Win, NS 6.2Win, NS 7Win, Mozilla 1.3Win, Opera 7Win, IE 5.2Mac, NS 7 Mac.

I use @import to hide the styling from non-compliant browsers. Since the HTML is just an unordered list, this degrades gracefully in non-compliant browsers.

#button {
width: 15em;
border-style: solid;
border-width: 2px;
border-color: #000080;
padding: 0 0 0 0;
margin: 0em 0.5em 1em 0.5em;
font-family: Verdana, Helvetica,
Arial, sans-serif;
background-color: #90bade;
color: #333;

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;

#button li {
border-bottom: 1px solid #90bade;
border-right: 1px solid #90bade;
margin: 0;

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-right: 3px solid #0a6896;
border-bottom: 3px solid #0a6896;
border-left: 3px solid #508fc4;
border-top: 3px solid #508fc4;
background-color: #0F83BC;
color: #fff;
text-decoration: none;
width: 100%;

html>body #button li a {
width: auto;

#button li a:hover {
border-top: 3px solid #5ba3e0;
border-left: 3px solid #5ba3e0;
border-bottom: 3px solid #1c64d1;
border-right: 3px solid #1c64d1;
background-color: #2586d7;
color: #fff;

#button li a:active {
border-top: 4px solid #1c64d1;
border-left: 4px solid #1c64d1;
border-bottom: 2px solid #5ba3e0;
border-right: 2px solid #5ba3e0;
background-color: #2586d7;
color: #fff;

[edited by: Nick_W at 8:42 pm (utc) on May 20, 2003]
[edit reason] de-linked [/edit]

10:55 pm on May 20, 2003 (gmt 0)

10+ Year Member

Thank you very much for the reply. I do realize that getting crawled by the search engines is a little hampered by my choice of navigation.

With these suggestions, this can very well be something that's going to benefit many.

One other thing I would like to ask if I may...the "#" sign use....I am having difficulty seeing how that is implemented. Could you provide an example of how that's implemented on a page?

1:45 am on May 21, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

The hash mark signifies a unique ID, and if not already familiar with the various uses, you soon will be.

Written in a CSS statement, the hash mark identifies a style, or block of styles, that will be applied to a particular element and no other. Please note however, rules of inheritance may be a factor for child elements.

#announcement-box {
background: #eee;
color: #666;
float: left;
width: 16em;

<div id="announcement-box">Important Information:</div>

In the above example, the CSS statement creates a set of styles for the unique ID "content" which, can only exist once per page, though may occur again as a "page-only" element, elsewhere in the site.

The simple rule to follow is: Use .classes if a style or set of styles, will likely be applied multiple times on a page. Use ID (#id) if the element is a unique component of the page and will not occur elsewhere on the page.

The ID is extremely useful as once applied to an element on page, that element can be manipulated using scripting, styled with CSS and/or targeted by hyperlinks.

Spiders LOVE standard hyperlinks!

On a page, the hash mark, or fragment identifier, allows targeting of content specific anchors. The following examples demonstrate possible usage:

A HEADER as a anchor: <h3><a id="grants">Grants</a></h3>

A HYPERLINK targeting the fragment identifier from another location on the same page: <a href="#grants">Grants</a>

A HYPERLINK to the same target but from anther page on the same site: <a href="page.htm#grants">Grants</a>

A HYPERLINK to the same target but from another website: <a href="http://www.example.com/index.htm#grants">Grants</a>

NOTE: Html 4.0 uses name to create anchors: <h3><a name="deprecated-by-xhtml1.1">Use ID for Targeting</a></h3>

Now using the very first example: <a href="http://www.www.example.com/page.htm#announcement-box">Loan</a> a hyperlink is created that targets the announcement box on the page.htm page which is styled to float left, be 16em in width, have a light gray background and render medium gray text! Yep, the old #hash mark is pretty useful! It can serve multiple uses all at the same time.

- papabaer

[edited by: Nick_W at 5:59 am (utc) on May 21, 2003]
[edit reason] no specifics / urls please [/edit]

7:54 pm on May 23, 2003 (gmt 0)

10+ Year Member

My partner utilized the information in this thread and redid my navigation menu with these new CSS buttons.

The problem is that now my custom bullets that are used elsewhere on the site are showing up on my nav panel and it really looks ridiculous. How can I fix this?

The nav panel is an SSI that shows on all pages if that matters.

7:59 pm on May 23, 2003 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member

You may need to declare a class for the <li> in the menu if that is the method you chose. Then assign a custom bullet or use the default setting.

It sounds like you used the <li> method described in this thread which from what I understand may be a more appropriate way to define lists of links. I tried it and it did not work for my application but it surely went into my code library for future reference.

The custom bullet you have assigned to your <li> rule is now being brought into your new navigation because you are using the <li> element. If you assign a special class to that <li class="name"> in the menu, you can avoid the custom bullet issue or assign another custom bullet that fits with the nav.

It's this one in the code that is controlling the appearance of the <li>...

#button ul{

10:55 pm on May 23, 2003 (gmt 0)

10+ Year Member

I tried to set the id of the ul tag to something else, which produced no results that I can see.
This 41 message thread spans 2 pages: 41

Featured Threads

Hot Threads This Week

Hot Threads This Month