12 Excellent CSS3 Button and Menu Techniques

By / Apr 23, 2010 / Tutorials

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.

  • http://www.chrismower.com Chris Mower

    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).

    • Ryan Somerville

      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+.

      • Ben

        But most people don’t have whatever version in IE that allows webkit transitions, and ms is terrible. Even opera allows webkit. That said, I know many people who are fed up with IE, and would use any browser except IE.

  • http://www.webdesignkc.co.uk/ Rory

    Great set of resources, thanks Henry. Any idea what the best type of button / navigation is for building a website with SEO?

  • http://www.crearedesign.co.uk Damian Smith

    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 :]

  • http://www.simonday.com Simon Day

    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 :-(

  • http://psdho.me PSDhome

    Great post. Thank you so much.

  • http://www.energizedit.com Mark

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

  • http://www.jordanwalker.net Jordan Walker

    Great list of resources for buttons and menus.

  • http://www.sgdoeschwitz.de inja

    the css3 buttons are great, the probleme is the IE

  • http://www.scottrockers.com scottrockers

    Great list, thanks for posting.

  • http://www.smashingshare.com Smashing Share

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

  • http://www.sensecall.co.uk Dan Sensecall

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

  • http://lenatailor.designerteam.info Lena Tailor

    This is Brilliant…. Very useful Share..

  • http://www.studioweber.com Alex Flueras

    Nice list of menus. Thanks.

  • http://www.xcellence-it.com/ Xcellence IT

    nice work, this techniques are very nice..

    would like to try couple of them…

  • http://www.webrisorsa.info Web Risorsa

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

  • http://www.flashjuggler.com/ Alex S

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

  • http://designwithcrackers.blogspot.com/ Thiago Cavalcanti

    Nicely summarized, thanks for the work…

  • http://www.lonocreative.com lono

    oooh great tutorial… thanks :-)

  • http://www.aravindtemplates.com Aravind

    HI…..

    This is really nice information…

    thanks,
    aravindtemplates.com

  • http://www.greathomeideas.blogspot.com Toyin

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

  • http://dvia.com/buttonMaker tpryor

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

  • http://www.newviewit.com Website Design

    CSS3 can do lots more than what you offer…

    step out of the box

  • http://koelimaya.web.id koelimaya

    thx.., this usefull for me

  • http://www.designmango.com DesignMango

    great buttons made just from css3

  • http://miloq.blogspot.com/ Manuel Ignacio López Quintero

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

  • http://www.actstudio.ro/ Adrian Iorgu

    Nice pack of CSS3 menu techniques. Thank you Henry

  • http://www.geekeries.fr Valentin

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

  • Al sMITH

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

    Apple’s Navigation bar using only CSS

  • Abdullah Bin Laique

    Thanks for sharing great piece of resources thanks again

  • http://liljosh.com Lil Josh

    Could you add my tutorial for CSS3 Google buttons to the list?

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

    -Lil Josh

  • http://www.webexstudios.com/ webexstudios

    Great Collection of CSS3 Buttons.
    Thanks

  • http://www.tonysalephotography.co.uk Tony

    Wonderful collection – cheers!

  • http://www.bigswebdesign.co.uk/ Stewart

    Nice list, Thanks!

  • http://www.creattor.com Rob Johnson

    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!

  • http://www.lasane.in Kedar

    Thanks for Useful Tutorial