Top 10 CSS3 buttons tutorials

by Jean. 25 Comments -

Despite being an emerging technique still unsupported by some browsers, CSS3 gained a huge attention from designers and web developers in the last 6 months. In fact, CSS3 brings to life countless new possibilities to make even better websites. In this article, I have compiled a list of the best 10+ tutorials to make extremely gorgeous buttons using CSS3.

Super Awesome Buttons with CSS3 and RGBA


» View tutorial

Your own Google buttons using CSS3


» View tutorial

CSS3 Gradient Buttons


» View tutorial

Kick-Ass CSS3 Button


» View tutorial

Pure CSS3 icons


» View tutorial

Extremely fancy CSS3 buttons


» View tutorial

BonBon: Sweet CSS3 buttons


» View tutorial

Realistic Looking CSS3 Buttons


» View tutorial

CSS3 “Aqua” buttons with no images


» View tutorial

Flexible CSS3 toggle buttons


» View tutorial

Building beautiful buttons with css gradients


» View tutorial

Comments (25) - Leave yours

  1. Rob said:

    I would really love it if I could use these techniques on client sites. But alas I can yet.

    Most clients still refuse to let go of IE 6-7. *sigh*

      • Pierre-Yves said:

        … and for this reason, I still don’t understand what’s the “buzz” around CSS3! If you’re serious about making websites, how can you ignore IE users? Answer: you can’t! Therefore, you can’t use CSS3.

        Tell Microsoft to stop polluting the Web with their low quality software, then we’ll be able to do something with CSS3 and HTML5.

        Meanwhile, take a look at dearie6(dot)com… :)

        • Jean-Baptiste Jung said:

          You can’t ignore IE users, but there’s no problem to serve them a less beautiful website. After all, they chose to use a product with limitations, so the majority of users shouldn’t be penalized just because of IE users.

          • Pierre-Yves said:

            Thanks for your reply Jean-Baptiste… I definitely feel better if I see it from this point of view!

            Guess I’ll keep on playing around with PNG fix scripts meanwhile, and wait to see the vast majority of users stop using IE6!

            Then, I guess it will be something to emulate CSS3 behaviors on IE7/IE8, and life will go on (Do you know anything that can be done in order to mimic this behavior on IE7+)…

            And in all cases, thanks for pointing us these buttons! I didn’t wanted to sound pejorative, in the end! :)

        • Guilherme Zühlke O'Connor said:

          You know the saying, right, guns don’t kill people, people kill people, same thing with software.

          The problem is not Microsoft polluting, there is an amazing amount of much worse software around and is causing very little trouble. The problem is that at some point some 60% of the web users used it, and even now, it’s a quite significative ammount.

          Now, it’s easy to get in the path of blaming the users and humanity for that but you’d be wrong. Us, web devs and web developers are to blame at a large extent, because we have been given bad browsers life support systems and created a an absurd illusion that all browsers are equal and when users are prompted to change they say:

          “Why, everything works fine on IE6″

          And they are right, because we made it so. It IS time to move on and give users a reason to change, it is time to give better browsers a better name through our work.

          • jake wolfe said:

            Pierre-Yves,

            Your prayer might be answered very soon and googleframe may be the answer.

            http://code.google.com/chrome/chromeframe/

            ;)

            cheers!

            jake

    • Daniel said:

      you should just bill your clients extra to make it IE7 and 6 compatible. tell him the base price for the ie8/crome/ff/opera version, and then your hours*rate*1.5 for IE7 + hours*rate*3 for the IE6 version.

  2. Henry said:

    But man, there`s a htc archive that turn possible the element radius be functionaly on IE and all browsers.
    You can read more in that link: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

  3. Matthew Smith said:

    For people wanting to use HTML5 and CSS3 in older versions of IE, try the Google Chrome frame. Not sure of the impact it has on loading times and such, but it WILL allow you to use the aforementioned technologies.

  4. Dan said:

    Wow, these are so awesome. I knew that there were some cool stuff with CSS3, but this is too much. I can’t believe that these are without images and only CSS.
    I love the Kick-Ass CSS3 Button. Can’t wait for people to start using CSS3 everywhere. Too bad some people are still using ultra old browsers like IE6.
    I just want to ask, is the bird in the Kick-Ass CSS3 Button made with a font? I guess we need to upload a font in order to work.

  5. Pit said:

    Thank you!

    For sometime now, i wanted to know how to create buttons like these in css, I almost did them on Photoshop, but i did not want to create one image for each button, really time consuming!
    but now with css one template, many buttons! : )
    Thanks,
    ps: i already using the style on my site.

  6. Phil said:

    Thanks for the great Tuts… it’s a bit depressing that it will be so long before we can freely use these features, but I’m of the same opinion as others that if you choose (or are unaware there is a choice!) to use IE as your browser… it’s likely that your expectations of what you see on the web will probably be lower.

  7. Daniel S said:

    For our german readers, here is another great example for sexy CSS3 Buttons: http://www.shiftedwork.de/blog/2010/08/28/the-magic-of-css3-sexy-buttons/

  8. Rod Reon said:

    Thanks for sharing excellent informations. Your web-site is so cool. I’m impressed by the details that you’ve on this blog. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my friend, ROCK! I found simply the info I already searched all over the place and just couldn’t come across. What an ideal web site.

Leave a Reply

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

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!