Just made some nice buttons with CSS3. Lovely, huh?
[Edit]: Just added the code for you to check it.
almost 3 years ago
love it! would love to see the code someday :P
@Jonatan, it's pretty easy to do with CSS3. You should try, seriously ;)
awesome! I love them :D
nice, did you see mine CSS button?
@Na, nope. Where is it, dude?
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?
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 ;)
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 ;)
Hahaha, thanks, buddy! :)
I think you should release the code, this might be a scam :p
How did you what inset shadow? (third button)
@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.
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 ;)
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 :)
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 ;)
Great work Alberto :)
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:
And if you plan to start a project for this thing, you could call me in for making it nicer in older browsers : )
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.
Very clever, and looks cool.
@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.
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 ;)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter