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
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).
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+.
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.
Great set of resources, thanks Henry. Any idea what the best type of button / navigation is for building a website with SEO?
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 :]
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 🙁
Great post. Thank you so much.
I’ve used a couple of these tehcniques, very nice.
Great list of resources for buttons and menus.
the css3 buttons are great, the probleme is the IE
Great list, thanks for posting.
Nice roundup. Great techniques to know. Thanks for sharing!
Check out these buttons too… they’re pretty good!
https://fuzeo.com/tutorials/sexy-buttons-with-css3/
This is Brilliant…. Very useful Share..
Nice list of menus. Thanks.
nice work, this techniques are very nice..
would like to try couple of them…
Very nice to see all those button and menu works done… All the collections are really good…
Great CSS3 tutorials. Some nice tricks to use on our website and products. Thank you.
Nicely summarized, thanks for the work…
oooh great tutorial… thanks 🙂
HI…..
This is really nice information…
thanks,
aravindtemplates.com
Great source of information for baby designers like me. I’m glad I found this site.
I recently added a CSS 3 button maker tool to my site https://dvia.com/buttonMaker
I still have a few more features to add, but it already has most features in place.
go HTML5/CSS3 !!!
CSS3 can do lots more than what you offer…
step out of the box
thx.., this usefull for me
great buttons made just from css3
Great article! I think that the CSS3 is the future of the interface on apps!
Nice pack of CSS3 menu techniques. Thank you Henry
I just update my framework
https://www.geekeries.fr/buttons/
The format below looked excellent, but the link went nowhere.
Apple’s Navigation bar using only CSS
Thanks for sharing great piece of resources thanks again
Could you add my tutorial for CSS3 Google buttons to the list?
https://liljosh.com/css3-google-buttons/
-Lil Josh
Great Collection of CSS3 Buttons.
Thanks
Wonderful collection – cheers!
Nice list, Thanks!
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!
Thanks for Useful Tutorial