12 Excellent CSS3 Button and Menu Techniques

Posted by Henry Jones on Apr 23, 2010 | 34 Comments

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.

34 comments

Chris Mower
April 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).
Reply
Rory
April 23, 2010
Great set of resources, thanks Henry. Any idea what the best type of button / navigation is for building a website with SEO?
Reply
Damian Smith
April 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 :]
Reply
Simon Day
April 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
Reply
PSDhome
April 23, 2010
Great post. Thank you so much.
Reply
Mark
April 23, 2010
I’ve used a couple of these tehcniques, very nice.
Reply
Jordan Walker
April 23, 2010
Great list of resources for buttons and menus.
Reply
inja
April 23, 2010
the css3 buttons are great, the probleme is the IE
Reply
scottrockers
April 23, 2010
Great list, thanks for posting.
Reply
Smashing Share
April 23, 2010
Nice roundup. Great techniques to know. Thanks for sharing!
Reply
Dan Sensecall
April 23, 2010
Check out these buttons too… they’re pretty good!
http://fuzeo.com/tutorials/sexy-buttons-with-css3/
Reply
Lena Tailor
April 23, 2010
This is Brilliant…. Very useful Share..
Reply
Alex Flueras
April 23, 2010
Nice list of menus. Thanks.
Reply
Xcellence IT
April 24, 2010
nice work, this techniques are very nice..

would like to try couple of them…
Reply
Web Risorsa
April 24, 2010
Very nice to see all those button and menu works done… All the collections are really good…
Reply
Alex S
April 24, 2010
Great CSS3 tutorials. Some nice tricks to use on our website and products. Thank you.
Reply
Thiago Cavalcanti
April 25, 2010
Nicely summarized, thanks for the work…
Reply
lono
April 27, 2010
oooh great tutorial… thanks
Reply
Aravind
May 3, 2010
HI…..

This is really nice information…

thanks,
aravindtemplates.com
Reply
Toyin
May 6, 2010
Great source of information for baby designers like me. I’m glad I found this site.
Reply
tpryor
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 !!!
Reply
Website Design
May 11, 2010
CSS3 can do lots more than what you offer…

step out of the box
Reply
koelimaya
May 18, 2010
thx.., this usefull for me
Reply
DesignMango
August 26, 2010
great buttons made just from css3
Reply
Manuel Ignacio López Quintero
November 10, 2010
Great article! I think that the CSS3 is the future of the interface on apps!
Reply
Adrian Iorgu
November 18, 2010
Nice pack of CSS3 menu techniques. Thank you Henry
Reply
Valentin
August 4, 2011
I just update my framework
http://www.geekeries.fr/buttons/
Reply
Al sMITH
November 23, 2011
The format below looked excellent, but the link went nowhere.

Apple’s Navigation bar using only CSS
Reply
Abdullah Bin Laique
December 21, 2011
Thanks for sharing great piece of resources thanks again
Reply
Lil Josh
February 24, 2012
Could you add my tutorial for CSS3 Google buttons to the list?

http://liljosh.com/css3-google-buttons/

-Lil Josh
Reply
webexstudios
March 10, 2012
Great Collection of CSS3 Buttons.
Thanks
Reply
Tony
March 13, 2012
Wonderful collection – cheers!
Reply
Stewart
April 12, 2012
Nice list, Thanks!
Reply
Rob Johnson
April 19, 2012
Good day. First I want to congratulate you for this wonderful work and second why you don’t register to a website that collects many many assets? Of course free one like http://www.creattor.com and others, it is so much easier for us, web designers to find them there than here. Have a wonderful day! Cheers!
Reply