Cross Browser CSS3 buttons

39 Responses (page 1 of 2)

1. Pro Alberto Calvo

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

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

   almost 3 years ago

2. Fran Pérez

   Cool!

   almost 3 years ago

3. Pro Jonatan Castro

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

   almost 3 years ago

4. Pro Alberto Calvo

   Thanks, guys!

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

   almost 3 years ago

5. Manolo Sañudo

   awesome! I love them :D

   almost 3 years ago

6. Na Wong

   nice, did you see mine CSS button?

   almost 3 years ago

7. Pro Alberto Calvo

   @Na, nope. Where is it, dude?

   almost 3 years ago

8. Pro 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?

   almost 3 years 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 ;)

   almost 3 years ago

10. Pro 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 ;)

    almost 3 years ago

11. Carlos Tallón

    You rocks!!

    almost 3 years ago

12. Pro Alberto Calvo

    Hahaha, thanks, buddy! :)

    almost 3 years ago

13. Mladen

    Lovely!

    almost 3 years ago

14. Pro Made By Thomas

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

    almost 3 years ago

15. Thomas Maier

    How did you what inset shadow? (third button)

    almost 3 years ago

16. Pro 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

    almost 3 years ago

17. Pro 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

    almost 3 years 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 :)

    almost 3 years ago

19. Pro 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 ;)

    almost 3 years ago

20. Pro Matthew Skiles

    Great work Alberto :)

    almost 3 years ago

21. Pro 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 : )

    almost 3 years ago

22. Pro 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

    almost 3 years ago

23. Jono

    Very clever, and looks cool.

    almost 3 years ago

24. Pro 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

    almost 3 years ago

25. Pro 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 ;)

    almost 3 years ago