Cross Browser CSS3 buttons

Tags

1. 9 css3 %
2. 1 apple %
3. 1 buttons %

39 responses

1. Alberto Calvo

   Just made some nice buttons with CSS3. Lovely, huh?

   [Edit]: Just added the code for you to check it.

   2 months ago

2. Fran Pérez

   Cool!

   2 months ago

3. Jonatan Castro

   love it! would love to see the code someday :P

   2 months ago

4. Alberto Calvo

   Thanks, guys!

   @Jonatan, it's pretty easy to do with CSS3. You should try, seriously ;)

   2 months ago

5. Manolo Sañudo

   awesome! I love them :D

   2 months ago

6. Na Wong

   nice, did you see mine CSS button?

   2 months ago

7. Alberto Calvo

   @Na, nope. Where is it, dude?

   2 months ago

8. Andy Ngo

   Looks nice! I know this sounds stupid but does it make any difference in loading time if CSS button is used instead of image button on a website?

   2 months ago

9. Na Wong

   here at nadesign.net/safari ;) the orange one, and even in the flickr's stylesheet. Maybe we can make a project like uniform (http://pixelmatrixdesign.com/uniform/), but using CSS only ;)

   2 months ago

10. Alberto Calvo

    Thanks, Andy!

    Rendering graphics with CSS has many advantages: less bandwidth and http petitions, easier maintainability and scalability, plus that you don't need a graphic software to create and edit them. I made this all from the same CSS selector, and tweaked all the states from it. Imagine the power of that.

    For example, imagine you suddenly decide you want bigger buttons on your website. Instead of redoing all the graphic stuff, slice it and set the CSS to make it work, all you need to do is change font size, or padding, or the color of the gradient… It's really useful :)

    Na, we definitely should put more stuff in $Experiments ;)

    2 months ago

11. Carlos Tallón

    You rocks!!

    2 months ago

12. Alberto Calvo

    Hahaha, thanks, buddy! :)

    2 months ago

13. Mladen

    Lovely!

    2 months ago

14. Thomas Bossée

    I think you should release the code, this might be a scam :p

    2 months ago

15. Thomas Maier

    How did you what inset shadow? (third button)

    2 months ago

16. Andy Ngo

    @Alberto Wow, that's amazing. I think it's very interesting to see how the browser is capable of rendering these shapes and styles nowadays. :)

    Oh, I just noticed. The 2nd button, it's supposed to show the hover state of the button right? I think maybe you could use a darker shade or color to make it clearer? From what I see now the hover state is very subtle (noticeable but not clear enough). But then again, I could be wrong. I suppose when you use it as a real button the effect is much stronger than seen in the preview.

    1likes

    2 months ago

17. Alberto Calvo

    Thank you all. I really appreciate your support and comments! :D

    Just added the code for you to check it. @Thomas(s) go check it out.

    The inset shadows are made with the inset value on box-shadow. As easy as that. Works fine on Safari5+, Chrome, Firefox and Opera. Safari 4 neither support multiple box shadows.

    @Andy, you're totally right. It's very subtle, but the effect in the real button is perfectly noticeable ;)

    1likes

    2 months ago

18. Miro Keller

    While this is pretty neat, calling it cross-browser is somewhat misguiding... It surely degrades on older browsers, but they immediately stop being gorgeous... I guess I'll stick to images for the meantime :)

    2 months ago

19. Alberto Calvo

    Well, if you use an awesome browser you get an awesome result… and if you use a shitty one at least you have a decent result. If we developers and designers don't push, this will never get better ;)

    2 months ago

20. Matthew Skiles

    Great work Alberto :)

    2 months ago

21. Reimar Servas

    Great work!

    I am currently working on a whole custom GUI that just uses CSS (only icons are graphics). I think it’s not a big deal to make nice buttons for old browsers,too. Only for the highlight you need a 1px (transparent white) graphic. The gradient is possible in IE, too (via some IE filter I think).

    I will try to build this example in the browser sometime later today:

    Example

    And if you plan to start a project for this thing, you could call me in for making it nicer in older browsers : )

    2 months ago

22. Alberto Calvo

    Thanks again, guys :)

    @Reimar, the challenge was doing it without images and using web standards. That discards using non standard IE filters ;)

    I think the time of hacks and overwork is over. Let's promote web standards and reward ppl that uses better browsers with better experience.

    3likes

    2 months ago

23. Jono

    Very clever, and looks cool.

    2 months ago

24. Reimar Servas

    @Alberto Yeah I see we disagree here. Rounded corners, CSS3 selectors, some nice CSS transitions – all fine, all stuff I really love to use.

    But custom buttons are too much part of the overall design for me to leave them unstyled for older browsers. For me it’s a challenge and really fun to find a nice and elegant solution (one that only server properitary code in a properitary way of course – so conditional comments and IE filters are fine for me).

    But like I said – we don’t agree here and I don’t really think we need to discuss : )

    Keep on with the great work.

    1likes

    2 months ago

25. Alberto Calvo

    Yeah, I see your point, and I understand that for some clients the degradation could be too much, specially when IE is still (and sadly) the most used browser in the world. It's completely fine for me ;)

    2 months ago

26. Paul Jackson

    A tip to make this awesome button even better would be to move the text down by 1 pixel on the :active state to give an even more realistic depressed state. 1 pixel goes a long way!

    1likes

    2 months ago

27. Alberto Calvo

    Well, depending of the lightning and the shape of the button in all states. This one doesn't need that, but yeah, it's a nice effect. A bit overused IMO, but definitely nice :)

    2 months ago

28. Tony Geer

    Really nice work, I like the active state too.

    2 months ago

29. James Morrison

    Looks awesome. I tend to stick to images to maintain the same look across all browsers but the quality of the HTML output has made me stop and think.

    Nice work!

    1likes

    2 months ago

30. Alberto Calvo

    Thanks, guys!

    @James, glad you find it useful and somewhat challenging :)

    2 months ago

31. Rogie

    Dude, that's some dead sexy CSS. Awesome job!

    about 1 month ago

32. Alberto Calvo

    Thanks!! :)

    about 1 month ago

33. Ivor Padilla

    The inset shadow looks terrible in Chrome :(

    about 1 month ago

34. Alberto Calvo

    Windows? Sigh

    about 1 month ago

35. Ivor Padilla

    Si Alberto, lamentablemente. Lo que pasa es que quería usar inset shadows con las imágenes y rounded corners pero se ve terrible. Vi esto en mi mac y lo probé en windows a ver si era cross platform pero ya veo que no.

    PS. Deberías hacerte un pack de esos botones y venderlos en CodeCanyon :)

    Saludos.

    about 1 month ago

36. Alberto Calvo

    Too bad. I hope they fix it soon :(

    Thanks!

    about 1 month ago

37. Ale Muñoz

    It looks killer!

    However, Webkit and Gecko have some serious problems when rendering these sort of things over a dark background.

    I'm working on a fix for it (basically, stop using CSS borders, and fake them using shadows) and will dribbble it when it's ready : )

    about 1 month ago

38. Alberto Calvo

    Nice. That's another option, yeah. The possibilities of box-shadow are infinite. Can't wait to see what you come up with ;)

    about 1 month ago

39. Ale Muñoz

    CSS3 Buttons 400 × 300 (120,000 pixels) July 29, 2010

    Rebound

    CSS3 Buttons

    July 29, 2010

    Some fixes for when you want to use CSS3 buttons on dark / image backgrounds.

    The code: http://gist.github.com/498736

    about 1 month ago