homepage Welcome to WebmasterWorld Guest from 54.145.243.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

This 41 message thread spans 2 pages: < < 41 ( 1 [2]     
CSS Beveled Button Effect
What is the best way to do this?
pageoneresults

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



 
Msg#: 1025 posted 4:00 pm on May 10, 2003 (gmt 0)

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

 

Intermagus

10+ Year Member



 
Msg#: 1025 posted 2:46 am on May 20, 2003 (gmt 0)

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">
<tr>
<td valign="top"
style="cursor: hand; border: 2 outset #b0c4de; background-color: #b0c4de"
onmouseover="this.style.backgroundColor='#0678C0'"
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?

pageoneresults

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



 
Msg#: 1025 posted 3:00 am on May 20, 2003 (gmt 0)

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.

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1025 posted 6:45 am on May 20, 2003 (gmt 0)

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.

pageoneresults

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



 
Msg#: 1025 posted 6:51 am on May 20, 2003 (gmt 0)

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! ;)

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1025 posted 7:15 am on May 20, 2003 (gmt 0)

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

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

ajkimoto

10+ Year Member



 
Msg#: 1025 posted 7:30 pm on May 20, 2003 (gmt 0)

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

http://www.alistapart.com/stories/taminglists

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 {
position:absolute;
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;
font-size:0.8em;
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]

Intermagus

10+ Year Member



 
Msg#: 1025 posted 10:55 pm on May 20, 2003 (gmt 0)

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?

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1025 posted 1:45 am on May 21, 2003 (gmt 0)

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]

aroach

10+ Year Member



 
Msg#: 1025 posted 7:54 pm on May 23, 2003 (gmt 0)

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.

pageoneresults

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



 
Msg#: 1025 posted 7:59 pm on May 23, 2003 (gmt 0)

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{
list-style:none;
margin:0;
padding:0;
border:none;
}

Intermagus

10+ Year Member



 
Msg#: 1025 posted 10:55 pm on May 23, 2003 (gmt 0)

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 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved