Cross Browser CSS3 buttons
Tags
Ale Muñozkeyboard shortcuts: ← previous shot → next shot L or F like
32,257,206,091 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
39 Responses (page 1 of 2)
Pro
Alberto Calvo
Just made some nice buttons with CSS3. Lovely, huh?
[Edit]: Just added the code for you to check it.
over 1 year ago
Pro
Fran Pérez
Cool!
over 1 year ago
Pro
Jonatan Castro
love it! would love to see the code someday :P
over 1 year ago
Pro
Alberto Calvo
Thanks, guys!
@Jonatan, it's pretty easy to do with CSS3. You should try, seriously ;)
over 1 year ago
awesome! I love them :D
over 1 year ago
nice, did you see mine CSS button?
over 1 year ago
Pro
Alberto Calvo
@Na, nope. Where is it, dude?
over 1 year ago
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?
over 1 year ago
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 ;)
over 1 year ago
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 ;)
over 1 year ago
You rocks!!
over 1 year ago
Pro
Alberto Calvo
Hahaha, thanks, buddy! :)
over 1 year ago
Lovely!
over 1 year ago
Pro
Made By Thomas
I think you should release the code, this might be a scam :p
over 1 year ago
Pro
Thomas Maier
How did you what inset shadow? (third button)
over 1 year ago
@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.
over 1 year ago
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 ;)
over 1 year ago
Pro
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 :)
over 1 year ago
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 ;)
over 1 year ago
Pro
Matthew Skiles
Great work Alberto :)
over 1 year ago
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 : )
over 1 year ago
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.
over 1 year ago
Very clever, and looks cool.
over 1 year ago
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.
over 1 year ago
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 ;)
over 1 year ago