From the technical aspect this is well done because it shows the power of CSS. From a designer's point of view it is quite far from perfect. The icons look weird and the active state looks quite uninspired with only showing an inner shadow. We shouldn't over hype such things just because "there are no graphics used". The user doesn't care if there are graphics used or not. Also the user won't recognize a difference in loading time because the icons wouldn't weight many bytes.
I'd probably use this code and change the active state to use a different color (all in CSS of course). It might even be possible to have the text and icon shift slightly down and to the right (all in CSS of course). Those changes would give it a satisfactory active state IMO.
I decided to put my money where my mouth was. Here's an attempt at a modified active state that, at least in my eyes, looks more like what I would expect out of an active state:
Could you elaborate on the weirdness issue? I'm not a designer but but would like to learn about the flaws these may have. The active state doesn't look so good though, agreed.
With all due respect, this still lacks the polish of traditional well-crafted raster buttons. Having looked at (what seems like) all CSS buttons in existence, I am not entirely convinced that CSS is actually capable of pixel perfect replication of Photoshop goodness. At least not at the moment.
More importantly though - scaling the button up or down while keeping it exact visual appearance typically requires readjustment of its accentuating details - the transparency %ages, stroke weights and colors and what not. This effectively renders the very idea of CSS buttons void - they can be scaled, but it will distort them, so the scaled up/down versions are basically no good.
-- Gallery of buttons that I yet to see CSS versions to match up to --
When I see people getting breathless about "awesome CSS-only buttons" or "cool CSS-only wallpaper," I am always reminded of the old proverb of the dancing bear: "The marvel is not that the bear dances well, but that the bear dances at all."
I think they're analogous to SVG/Illustrator rather than Photoshop. Many (don't know if all) the scaling issues could be remedied by using em instead of px in the stylesheet.
ok...So I did find these button "awesome", but then I do not claim to have a great eye for design. Can you point me to some buttons which you can classify as "awesome"
Why do they even need a View Demo button? Almost every article about CSS/JS scripts for cool effects does this, instead of just using whatever they want to demo in the blog post itself.
This way the demo pages are as succinct as possible, the code isn't confusingly intertwined with the html/css/js generated by their CMS (in this case WordPress) and matches as closely as possible what was described in the corresponding article.
It's also a fraction easier (saves finding a per-post css/js plugin), you don't have to worry about wierd interactions with the CMS code, and it will continue to work even if you change the CMS or theme.
I didn't see it as advocating the use of the buttons just as presenting the possibility. Presumably they keep consistent buttons across the site and probably they have other button demos?
As an experimental effort, i don't see a reason why the author would change the style of the demo button in the post. The demo button here is an anchor tag with a class name and he has used that style across the site for all demo/download buttons.
Creating a separate demo page where all the html/css can be dumped looks like a better option rather than messing up with the php template.
Small bug: If you click and hold and then drag outside the borders of the button, the button stays in its ':active' state until you click somewhere (anywhere) else.
This is expected behavior. Browsers follow the link on mouse up event, if you try to drag it away then mouse up happens outside of the button area and link won't be followed. Button remains active as last clicked element, this behavior is also consistent with operating systems.
Not really. While I agree that the link should not be followed, the button should still return to its normal pre-mouse-down, pre-hover state. Only the focus should remain with the button.
I hate how IE butchers these new CSS tricks, it always looks good in every other browser besides IE and it just so happens that the person that I'm working for now is an avid IE user and expects rounded corners on just about everything and the layout has to be pixel-perfect in IE. Annoying to say the least
They behave differently when clicking on the icon vs the text. IMO that is a design flaw, but I can see how some people would argue it's a matter of taste.
But to be completely fair so is the term "awesome". Submission could have been toned down a wee bit.
The border and the distance separating the icon from the text makes it look like two distinct buttons. Don't make me think: remove the unnecessary design element.
