CSS Beveled Button Effect

What is the best way to do this?

[pageoneresults]

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{
position:absolute;
left:6px;
top:118px;
width:130px;
}
#menu a{
display:block;
text-decoration:none;
padding:2px;
margin-bottom:0px;
border:1px outset;
color:#efefef;
background:#369;
font-size:12px;
text-align:left;
line-height:14px;
width:100%;
}
#menu a:hover{
border:1px outset;
color:#369;
background:#f9d543;
}
#menu a:active{
border:1px outset;
color:#369;
background:#efefef;
}

[DrDoc]

Well, it will never look the same in IE and the other browsers... But, a key to making the beveled effect show up more is to make the border at least 2px wide ;)

Here's something I've been using...

a.button {
padding: 2px 10px 3px 10px;
border: 2px outset #5AA0B8;
background: #046;
color: #FFF;
text-decoration: none;
height: 19px;
vertical-align: bottom;
}
a.button:active, a.button:focus, a.button:hover {
border: 2px inset #5aa0b8;
vertical-align: middle;
background: #046;
color: #5AA0B8;
text-decoration: none;
}

[pageoneresults]

Hehehe, I knew someone was going to tell me I could not get them to look the same.

I've been toggling between using ridge as opposed to outset. When I use the ridge attribute, Opera displays them a little closer to what I expected. It appears that the ridge and outset are the same in IE when using a 1px border. I tried the 2px for a more beveled effect and it was just a little too much for the design I'm working with. I want to keep them tight and just get that slight beveling effect.

It looks great in IE. As soon as time permits, I'm going to get these to work in Opera and Moz. And please, don't even bring up NN4.x in this topic, that browser is now dead!

[DrDoc]

As always, make it look the way you want it in Opera/Gecko first, then you can change it for IE ;)

Play around with specific border-top/border-left (etc.) colors. Then, just add a little thingy for IE with conditional comments.

In general, other browsers make the highlight lighter than IE does... Even if you specify the color. Why? Because they add highlight to the color, which IE doesn't...

[pageoneresults]

Ah-ha, hey DrDoc, thanks for the hint! I've managed to turn the above menu into a cross browser compatible one. After hours of testing, PC, Mac, IE, Opera, and Moz, I acheived the effect I was looking for through a little border control.

Here is the code I've come up with so far. This menu sits against a dark blue back drop, hence the border colors to acheive a beveled effect.

border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;

Works like a charm. Now, I'm sure someone is going to show me a more optimized version of this and I'll be waiting. ;)

P.S. Inset and Outset produce different results across the browsers. As a matter of fact, those two only worked in IE. Setting the properties of all four borders is the only way to produce similar results cross browser.

[Birdman]

>>Now, I'm sure someone is going to show me a more optimized version of this and I'll be waiting.

Ok, I'll bite ;) It only saves one line, but hey, it'a a few bytes.

border:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;

[pageoneresults]

That worked, thanks birdman.

<added>I had to put it back to the full declaration. The W3C CSS Validator gave me warnings about redefining my border attributes when using the shorthand version.

[Birdman]

Ok, thanks pageone! I need to start validating my CSS :)

I always validate the XHTML but always forget to do the CSS. Sorry!

Added: now I have to fix all my sheets that use that method :(

[papabaer]

The W3C CSS Validator gave me warnings about redefining my border attributes when using the shorthand version.

Warnings are not ERRORS.

Think of them as "kindly Old Mother Validator" asking you if you remembered to brush your teeth, wash behind your ears, and... as you head out the door, remembered to bring your rubbers. (What?--It looks like rain! Sheesh! What were YOU thinking?)

"Warnings" are just that... kindly, but at times stern sounding, even a bit annoying, reminders to be sure you know what you are doing, and why you are doing it.

Use the shorthand property.
- papabaer

[drbrain]

Another useful thing to do is adjust the padding when the button is :hover:active. This gives an even more realistic 'clicked' apperance:

#menu :link, #menu :link:active, #menu :link:hover {
border: 2px outset gray;
padding: 1px 6px 2px 5px;
}

#menu :link:hover:active {
border: 2px inset gray;
padding: 2px 5px 1px 6px;
}

<div id="menu"><a href="#a">foo</a><a href="#b">bar</a></div>

[pageoneresults]

Watch out, the inset and outset attributes appear to work in only IE. That is what I originally used and it was driving me crazy trying to figure out how to get it to look the same in Opera and Moz. Using the border attributes for all four borders is the only way to effectively create the menu and have it appear the same in those browsers mentioned. Did I forget to mention NN4.x? Oh well, I am no longer providing support for that defunct browser.

Papabaer, I just don't like the warnings. I like to see that no errors, no warnings come up when validating. Since I stopped support for NN4.x, I don't see them anymore because I am not using the @import statement and getting a long list of warnings about redefining everything.

[drbrain]

I don't see IE6 rendering them on the top and bottom, only left and right, unless you do not specify a doctype. This is an error.

Mozilla has supported them since early milestones (M8, at least) so all gecko browsers have support for them. Gecko browsers render inset/outset regardless of a doctype.

[pageoneresults]

I think the rendering issue may be because I am using a 1px border on all four edges. When I used the inset or outset attributes, Opera and Moz displayed them as solid lines, you could not see any bevel effect.

As soon as I added the four border attributes, I was able to acheive the effect of inset or outset without using those attributes.

a:link - Specify one set of borders to create the outset look.

a:hover - Specify another set of borders to create the inset look.

P.S. IE was rendering them just as I thought it would. I did not see any problems with the top and bottom borders when I was using just this...

border:1px solid outset;

[pageoneresults]

Here is the updated code for creating the beveled button effect with the latest code revisions...

#menu{
position:absolute;
left:9px;
top:114px;width:116px;
}
#menu a{
display:block;
font-size:11px;
color:#efefef;
background:#369;
text-decoration:none;
padding:2px;
margin:0px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
width:116px;
line-height:15px;
}
#menu a:hover{
color:#369;
background:#efefef;
}
#menu a:active{
color:#369;
background:#f9d543;
}

I then added a special p class that contains the border code and created headers to separate the beveled buttons into categories.

p.menuhead{
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
margin:0px;
padding:1px 2px 3px 2px;
font-size:12px;
font-variant:small-caps;
font-weight:bold;
color:#369;
background:#f9d543;
width:116px;
line-height:15px;
cursor:help;
}

[keimano tokoyami]

Hi,
Just thought I'd share this. If one used the beveled buttons for site navigation and wanted the link corresponding to the page a visitor was currently on (i.e. the about button on the about page) to be styled differently&#8212;or pressed in this case&#8212;one could specify an id for each body and link to be affected. Then, just add the appropriate rules.

For example:
#homepage a#home {styles}
#about a#about {styles}

So if a visitor was at the homepage, the homepage button would be "pressed." And if the visitor would be on the about page, the about button would be "pressed."

No need for multiple navigation files or scripting.

If interested, I have a <snip>

Cheers,
KT

[edited by: Nick_W at 11:25 am (utc) on May 16, 2003]
[edit reason] no urls please [/edit]

[pageoneresults]

KT, thanks for that tip. I've been experimenting and just can't grasp the concept I think. Here is the scenario...

I have a left nav menu. That menu is being controlled using the code above. That left nav menu is also an include. Do I assign the ids to each a href? And then place the appropriate id in the body tag for that page?

<div id="menu">
<a id="cfp" href...></a>
<a id="cmt" href...></a>
</div>

And then in my css...

#menu a#cfp {color:#ccc;background:#369;}
#menu a#cmt {color:#ccc;background:#369;}

I'm still learning this css stuff! ;)

<edit>Changed sequence of css</edit>

[edited by: pageoneresults at 3:17 am (utc) on May 16, 2003]

[pageoneresults]

KT, I think it may be my includes. I can acheive the effect of an active button state, but that same button stays active no matter what page you are on.

[keimano tokoyami]

Hi pageoneresults,

"Do I assign the ids to each a href?"

Yes, you would need unique id's for each button (a href) you want to have the active state applied to.

"And then place the appropriate id in the body tag for that page?"

No. Each page that corresponds to a button that you want to be affected would have its own id. For example, let's assume that your "cfp" link is the link for your homepage. Here's what you could have:

HTML of homepage document:

<body id="homepage"> <-- you assign an id for the page

CSS:

#homepage a#cfp {styles} <-- then you do something like this

This would work in an included file as well since each link will have its own unique id and each body tag of a web page, you want affected, would have its own unique id.

It may sound like a lot of code, but if the button active effect is the same across multiple links, you can list the selectors comma-like (what's the proper term?).

Example:
#homepage a#cfp, #about a#cmt {styles}

If you haven't already, feel free to download the example files (the link in my previous post) and hack them.

hth,
KT

[pageoneresults]

KT, you are a genius! No, really! I finally got this all to work as you described. I even optimized the css to do it. This is the icing on the cake for the beveled button effect. The possibilities are almost limitless. I owe you one!

P.S. Add width:100%; to your a elements and the entire <div> will become active instead of just the text link.

P.S.S. I haven't been this excited since I removed my first <font> tag years ago and replaced it with css!

[pageoneresults]

Update, when assigning your ids, you need to make sure that the ids are unique. I originally had them set up like this...

#index a#index, #cfp a#cfp

Since I've never really worked with ids, I did not realize that your body id and a href id cannot be one in the same. So, I just added a "b" in front of the body ids like this...

#bindex a#index, #bcfp a#bcfp

Using two ids with the same name is apparently not valid html. Found that out after I set everything up and decided to check my html validation. It failed until I made sure the ids were unique.

[pageoneresults]

Summary for developing a pure css menu with beveled button effects.

Okay, you css fans are really gonna love this one. I've been working on a navigation menu built purely in css that to many may look like a graphical button structure. My goal this year is to strip as many graphics that I possibly can from future design projects and use pure css. Here is the menu code, this is for a stacked left hand vertical navigation menu...

#menu{
position:absolute;
left:9px;top:114px;
width:116px;
}
#menu a{
display:block;
font-size:11px;
color:#efefef;
background:#369;
text-decoration:none;
padding:2px;
margin:0px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
width:116px;
line-height:15px;
}
#menu a:hover{
color:#369;
background:#ccc;
}
#menu a:active{
color:#369;
background:#f9d543;
}

You would of course adjust the attributes to meet your requirements. Now, here comes the spice...

#bindex a#index, #bcfp a#cfp, #bcmt a#cmt, #bcontact a#contact, #bemail a#email{
color:#369;
background:#efefef;
}

The code directly above is what controls the on page state of the button depending on which page you are on (compliments of one of our newest members keimano tokoyami [webmasterworld.com]). These are what is referred to as ids. You have to assign a unique id to each link so that you can control the active state.

Then, depending on which page you are on, you assign the unique id to the body tag like this...

<body id="bindex">

That body id tells the browser what the state of the active button should look like when the visitor is on that page.

Note: You must assign a unique id for the body and then another for the link. You cannot have two ids on the same page that are named the same, it is not valid html.

The left hand menu is set up as an include and the link in the include looks like this...

<a title="Home Page" id="index" href="/index.asp">Home Page</a>

Now, this is not for the casual css user who fiddles every now and then with css. This took me a while to learn and figure it all out. Now that I have, there is no turning back.

Many thanks go to Nick_W, papabaer, DrDoc, Birdman, drbrain and keimano tokoyami who provided the on page active state css solution for the buttons.

Ah, this css is so much fun!

[keimano tokoyami]

Isn't it?

The next thing to do, if you decide it's worth it, is to make the list of links more semantic by using lists (ordered or unordered).

Rather than using a div#nav, you could have ul#nav, or something, which is what I use.

Example:
ul#navi {border: 1px solid;list-style-type: none;margin: 0 175px 15px 165px;padding: 0;height: 20px;
voice-family: "\"}\"";voice-family:inherit;height: 18px;}html>body ul#navi {height: 18px;}
ul#navi li {display: inline;font-size: 80%;margin: 0;padding: 0;}

I believe if you set the anchors to "display: block;" and specify their size, you have no need to specify "width: 100%;". Could doctype also be a factor? I use XHTML 1.0 Trans, ul#nav, and block and size my anchors and the entire "button" area is clickable. No need for "width: 100%;".

To ensure that the size of each button is the same on almost all browsers (that supports this stuff), I incorporate the "box model hack" for IE 5. Depending on one's design and/or needs, this may be negligible.

Example:
ul#navi a {display: block;font-weight: bold;text-decoration: none;}

li#nHome a, li#nAbout a {border: 1px solid;margin: 0;padding: 2px 1px 2px 1px;text-align: center;position: absolute;}

li#nHome a {width: 50px;top: 133px;left: 166px;}
li#nAbout a {width: 50px;top: 133px;left: 216px;
voice-family: "\"}\"";voice-family:inherit;left: 220px;}html>body li#nAbout a {left: 220px;}

Another challenge for the buttons is to list them length-wise rather than stacked from top to bottom. I do this with "position: absolute;" (along with "top:" and "left:", etc.) and all browsers except Opera display this fine. Why? Because I absolute position the anchors but not the list container (or list items). And since I applied a style to the container (background and 1px border), you can tell where the lists/buttons are "suppose" actually be. Normally I would use the "box model hack" to fix this but since NN 7 displays it fine as-is, it gets screwy with the "hack" applied.

Possible solutions:
1. Apply absolute position to the list items and not the anchors/buttons. But I doubt it would correct the list container.

2. Float could work, but I'm trying not to use it. If anyone tries this, please let me know if comes out alright.

More fun play! :D

[papabaer]

Now lets see it with accessibility considerations: lose the fixed width and go fluid with "em." ;)

Give it the full screen(F11)/text-size "largest" test.

[keimano tokoyami]

Sorry, need to correct something I said earlier...

"No need for 'width: 100%;'."

I didn't need the 100% set for width in my "side-by-side" list of buttons because it was set explicitly (in pixels). I'm sure if one were to do that in the stacked order, then not needing "width: 100%;" would still remain true.

As for the accessibility consideration, I made that sacrifice for my current layout (side-by-side), however I don't see it being to difficult to modify with what pageoneresults is doing.

Thanks for that reminder papabaer. :D

[papabaer]

Cool Keimano! If you do address the accessibility concern, please keep us updated. I am certain many of us would love to hear of your approach and implementation.

I've been using beveled menu buttons in one form or another for well over a year and a half, but it's only been since last November that I took them fluid. Em is good!

I love it! Using Internet Explorer, I can select the LARGEST text size, hit F11 for full screen and watch as the menu scales accordingly. From "SMALL SCREEN RENDERING" to full screen, large text, I have it covered. It's a nice feeling too... :D

Nice to have you with us!
- papabaer

p.s. the above statement does not endorse the use of Internet Explorer. ;)

[pageoneresults]

This whole Beveled Button thing has been keeping me awake when I should be resting!

I've been experimenting with adding background images to the link, visited, hover and active states. Did some reading at various cutting edge css sites and come to realize that you can literally recreate a graphic button navigation structure using pure css. No more javascript!

Example...

}
#menu a:hover{
color:#369;
background:#fff repeat fixed url('/images/tile.jpg');
border-top:1px solid #000;
border-left:1px solid #808080;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}

I'm using a background now that tiles seamlessly. The button sits against the same background. It's a really nice effect that I thought could only be achieved using javascript.

[papabaer]

I use a background image to recreate a chrome buttom effect. The image file size is very small, and since it ia a background property applied uniformly, the efficiency is maximized.

You can really get advance with CSS background images, but you need to consider your original purpose. If it is reduced load times and fast rendering speeds, tiled or multiple application images, may be the best compromise.

Note: url('/images/tile.jpg') <--- IE5 MAC gets confused by the single quotation marks. It computes them as part of the actual string. IE5 MAC will fill your logs with 404's because of this.

The quotes are optional... doubles, no problems, single qoutes, IE5 Mac will stumble. No qoutes, all is well.

[pageoneresults]

The quotes are optional... doubles, no problems, single qoutes, IE5 Mac will stumble. No qoutes, all is well.

Thanks papabaer, that's a new one. Actually, I did test this in IE5 on the Mac and did not see any visible problems. Haven't looked at the 404s yet on that site, it's new.

Well, I'll now be spending my next living moments updating style sheets. It never fails, whenever you or Nick_W or one of the other css gurus steps in, I don't get any real work done! ;)

[papabaer]

"GET /'images/chrome.jpg' HTTP/1.1" 404 133 "http://www.example.com/" "Mozilla/4.0 (compatible; MSIE 5.16; Mac_PowerPC)"

I removed the single quotes and no more 404's.

This IE Mac anomaly also reared its ugly head for imported style sheets. I now will use the the @import rule to import global styles into a page or section specific style sheet.

If I used single quotes e.g. @import url('copy.css'); MAC IE5 would not import the style sheet. The 404's flagged it.

[pageoneresults]

CSS Beveled Button Effect - Horizontal Format

Okay, I think I figured this one out. I've tested in IE and Opera and it appears to be working as intended...

#menu{
position:absolute;
left:1px;
top:31px;
width:100%;
padding:5px 0px;
white-space:nowrap;
}
#menu a{
display:inline;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
font-size:11px;
color:#ccc;
background:#68849c;
text-decoration:none;
padding:3px 2px 3px 4px;
text-align:center;
}
#menu a:hover{
border-top:1px solid #000;
border-left:1px solid #666;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
color:#fff;
background:#47748e url('/images/tile-blu-blu-grn.jpg') fixed;
}
#menu a:active{
color:#fff;
background:#47748e;
}

Note that I have my menu absolutely positioned from the top at 31px. This is because I have a <div> sitting above the navigation that runs 100% the width of the window and is 30px in height with a 1px top/bottom border. The code looks like this...

div.top{
position:absolute;
top:0px;
left:0px;
padding:0px;
margin:0px;
width:100%;
height:30px;
text-align:right;
white-space:nowrap;
color:#000;
background:#47748e;
border-top:1px solid;
border-bottom:1px solid;
z-index:1;
}

I've positioned the #menu exactly 1px below the top div (31px). This creates a nice shadow effect when merged with the border of the #menu a elements. I think it is the white-space:no-wrap; that may solve the problem discussed earlier.

Note: <a href's> must be on one line in your code...

<a href></a><a href></a><a href></a>

P.S. Tell me why I get a space when putting the <a href> on a line by itself in the code. No, there are no <br /> tags either.

<a href></a>
<a href></a>
<a href></a>