Web Development

Ask something
Discussion Locked

Build 3D buttons with pure CSS

0 helpful
6 replies

by maryweilage

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

This week's Design and Usability Tactics e-newsletter describes how to build 3D buttons with pure CSS.

Will you use the tips in this e-newsletter to create 3D buttons with CSS? Do you have any favorite CSS tricks that you'd like to share with your peers?

If you aren't subscribed to the free Design and Usability Tactics e-newsletter, click the following link to automatically sign up:
http://nl.com.com/MiniFormHandler?brand=builder&subs_channel=bldr_front_door&list_id=e614&tag=fb

6 replies

by bkeller

I may use this technique, however, I noticed something, when you click one of the buttons, then use your Browser's Back button, the button you had clicked appears in the Active state. Is there a way to get the button to go back to the normal state automatically when the user goes back to the previous page? This problem happens in IE, but not Netscape.

by the_cloud_2002

In Zeldman's 'designing with web standards' on page 242 he talks about this. It is a flaw in IE/Windows.
Maybe in their next release they will fix this.

by bkeller

Thanks for the quick reply and reference. I actually have the book, but hadn't gotten that far in it yet. Thanks again!

by the_cloud_2002

I am being a stickler here and I will admit I haven?t read all of the css articles, just the ones that interest me. I understand that the css code is easy to pick apart and play with, but I also feel it does not promote efficient css writing. Just like this comment, I could have summed it up like this: I feel this example does not promote efficient css writing.

by kcollins

This is a nice effect and I have been using a similar technique for some time now. My only suggestion would be to modify the css code to specify a different position for the text in the unpressed and pressed states. The text should be slightly lower and farther to the right in the pressed state. This creates a more realistic effect. I achieve it by adjusting the padding-top and padding-left attributes.

This discussion is closed to new replies.