12 Excellent CSS3 Button and Menu Techniques

By / Apr 23, 2010 / Tutorials
shares

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 buttons

CSS3-Only Tabbed Area

css3 buttons

Radioactive Buttons

css3 buttons

Apple’s Navigation bar using only CSS

css3 buttons

How to Build a Simple Button with CSS Image Sprites

css3 buttons

Creating Dynamic Buttons With CSS3

css3 buttons

How To Create Depth And Nice 3D Ribbons Only Using CSS3

css3 buttons

CSS3 Chunky Menu

css3 buttons

CSS3 Dropdown Menu

css3 buttons

Pretty CSS3 Buttons

css3 buttons

jQuery style menu with CSS3

css3 buttons

CSS3-only horizontal drop line tab menu

css3 buttons

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

36 Comments

  1. 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
    • Ryan Somerville
      May 29, 2012

      That is true. Now, being 2 years later, IE has gotten better (still bad, but better). IE9 supports css3 and using the PIE library, you can design in css3 with support for IE6+.

      Reply
  2. 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
  3. 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
  4. 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
  5. PSDhome
    April 23, 2010

    Great post. Thank you so much.

    Reply
  6. Mark
    April 23, 2010

    I’ve used a couple of these tehcniques, very nice.

    Reply
  7. Jordan Walker
    April 23, 2010

    Great list of resources for buttons and menus.

    Reply
  8. inja
    April 23, 2010

    the css3 buttons are great, the probleme is the IE

    Reply
  9. scottrockers
    April 23, 2010

    Great list, thanks for posting.

    Reply
  10. Smashing Share
    April 23, 2010

    Nice roundup. Great techniques to know. Thanks for sharing!

    Reply
  11. Dan Sensecall
    April 23, 2010

    Check out these buttons too… they’re pretty good!
    http://fuzeo.com/tutorials/sexy-buttons-with-css3/

    Reply
  12. Lena Tailor
    April 23, 2010

    This is Brilliant…. Very useful Share..

    Reply
  13. Alex Flueras
    April 23, 2010

    Nice list of menus. Thanks.

    Reply
  14. Xcellence IT
    April 24, 2010

    nice work, this techniques are very nice..

    would like to try couple of them…

    Reply
  15. Web Risorsa
    April 24, 2010

    Very nice to see all those button and menu works done… All the collections are really good…

    Reply
  16. Alex S
    April 24, 2010

    Great CSS3 tutorials. Some nice tricks to use on our website and products. Thank you.

    Reply
  17. Thiago Cavalcanti
    April 25, 2010

    Nicely summarized, thanks for the work…

    Reply
  18. lono
    April 27, 2010

    oooh great tutorial… thanks :-)

    Reply
  19. Aravind
    May 3, 2010

    HI…..

    This is really nice information…

    thanks,
    aravindtemplates.com

    Reply
  20. Toyin
    May 6, 2010

    Great source of information for baby designers like me. I’m glad I found this site.

    Reply
  21. 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
  22. Website Design
    May 11, 2010

    CSS3 can do lots more than what you offer…

    step out of the box

    Reply
  23. koelimaya
    May 18, 2010

    thx.., this usefull for me

    Reply
  24. DesignMango
    August 26, 2010

    great buttons made just from css3

    Reply
  25. Manuel Ignacio López Quintero
    November 10, 2010

    Great article! I think that the CSS3 is the future of the interface on apps!

    Reply
  26. Adrian Iorgu
    November 18, 2010

    Nice pack of CSS3 menu techniques. Thank you Henry

    Reply
  27. Valentin
    August 4, 2011

    I just update my framework
    http://www.geekeries.fr/buttons/

    Reply
  28. Al sMITH
    November 23, 2011

    The format below looked excellent, but the link went nowhere.

    Apple’s Navigation bar using only CSS

    Reply
  29. Abdullah Bin Laique
    December 21, 2011

    Thanks for sharing great piece of resources thanks again

    Reply
  30. 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
  31. webexstudios
    March 10, 2012

    Great Collection of CSS3 Buttons.
    Thanks

    Reply
  32. Tony
    March 13, 2012

    Wonderful collection – cheers!

    Reply
  33. Stewart
    April 12, 2012

    Nice list, Thanks!

    Reply
  34. 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
  35. Kedar
    February 26, 2013

    Thanks for Useful Tutorial

    Reply

Leave a Reply