March 28, 2024

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

Share

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

37 Comments

  1. Chris Mower Reply

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

    1. Ryan Somerville Reply

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

      1. Ben Reply

        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.

  2. Damian Smith Reply

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

  3. Simon Day Reply

    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 🙁

  4. Rob Johnson Reply

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *