Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- CSS Beveled Button Effect


pageoneresults - 8:30 pm on May 15, 2003 (gmt 0)


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;
}


Thread source:: http://www.webmasterworld.com/css/1025.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com