12 Excellent CSS3 Button and Menu Techniques
CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations. So, in order to encourage you to start experimenting with CSS3, we’ve rounded up 12 excellent CSS3 button and menu techniques.
Roll Your Own Google Buttons
CSS3-Only Tabbed Area
Radioactive Buttons
Apple’s Navigation bar using only CSS
How to Build a Simple Button with CSS Image Sprites
Creating Dynamic Buttons With CSS3
How To Create Depth And Nice 3D Ribbons Only Using CSS3
CSS3 Chunky Menu
CSS3 Dropdown Menu
Pretty CSS3 Buttons
jQuery style menu with CSS3
CSS3-only horizontal drop line tab menu
Related Posts
Here's some other articles that you will definitely find useful.
7 Useful Resources to Help You Learn HTML5
10 HTML5 Demos to Make You Forget About Flash
13 Pure CSS Techniques for Creating JavaScript-like Interactions
15 Useful HTML5 Tutorials and Cheat Sheets
The Most Common HTML and CSS Mistakes to Avoid
Apr 23, 2010
I use a few CSS3 tricks on my blog and it’s important to not completely base your design off of CSS3 as there are still some browser compatibility problems and some people may not be seeing what you think they are. (*ahem* IE).
Apr 23, 2010
Great set of resources, thanks Henry. Any idea what the best type of button / navigation is for building a website with SEO?
Apr 23, 2010
Thanks for the list, some really helpful stuff in here.
I’m starting to use shadow a lot now, I think there a few that you can get away with when there is no browser support, shadows being one of them in my opinion (as long as you check it still looks acceptable in non supported browsers)
One thing I have just seen that looks interesting is the rotate function, I’ve never seen that before and think that would be fantastic if one day that was supported enough (hoping IE9 will do) and it becomes a standard function rather than the moz and webkit fixes.
Apart from shadows what other CSS3 do you use that you think is acceptable at the moment?
Thanks for sharing :]
Apr 23, 2010
I to dabble a little but make sure it is backward compatible with IE.
IE9 will have some CSS3 support so at least that is something. I can’t see people moving to IE9 in big enough numbers anytime soon so it could be a number of years before I can fully embrace it without any extra hassles
Apr 23, 2010
Great post. Thank you so much.
Apr 23, 2010
I’ve used a couple of these tehcniques, very nice.
Apr 23, 2010
Great list of resources for buttons and menus.
Apr 23, 2010
the css3 buttons are great, the probleme is the IE
Apr 23, 2010
Great list, thanks for posting.
Apr 23, 2010
Nice roundup. Great techniques to know. Thanks for sharing!
Apr 23, 2010
Check out these buttons too… they’re pretty good!
http://fuzeo.com/tutorials/sexy-buttons-with-css3/
Apr 23, 2010
This is Brilliant…. Very useful Share..
Apr 23, 2010
Nice list of menus. Thanks.
Apr 24, 2010
nice work, this techniques are very nice..
would like to try couple of them…
Apr 24, 2010
Very nice to see all those button and menu works done… All the collections are really good…
Apr 24, 2010
Great CSS3 tutorials. Some nice tricks to use on our website and products. Thank you.
Apr 25, 2010
Nicely summarized, thanks for the work…
Apr 27, 2010
oooh great tutorial… thanks
May 3, 2010
HI…..
This is really nice information…
thanks,
aravindtemplates.com
May 6, 2010
Great source of information for baby designers like me. I’m glad I found this site.
May 7, 2010
I recently added a CSS 3 button maker tool to my site http://dvia.com/buttonMaker
I still have a few more features to add, but it already has most features in place.
go HTML5/CSS3 !!!
May 11, 2010
CSS3 can do lots more than what you offer…
step out of the box
May 18, 2010
thx.., this usefull for me
Aug 26, 2010
great buttons made just from css3