Just another awesome CSS3 buttons | Hacker News Reader

Just another awesome CSS3 buttons

red-team-design.com

131 pointsredmaniack35 comments

In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.

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 --

[1] http://dribbble.com/shots/239089-Dialoggs-Login-Animated

[2] http://dribbble.com/shots/201485-Yo-check-it-iOS-UI-

[3] http://dribbble.com/shots/173658-To-project

[4] http://dribbble.com/shots/191108-Let-there-be-sense-

[5] http://dribbble.com/shots/199327-iPad-app-sneak-peak

[6] http://dribbble.com/shots/98510-Starred-Checked-Action-Butto...

(edit) - shortened list a bit, it is easy to get carried away with this stuff.

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.

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.

Depends how it's done, if the images are all in separate files (as opposed to using a grid mechanism) it will make a noticeable difference.

From a programmer's point of view, they look good. I think they would look great on a minimal-like design.

I'm kind of surprised by the active state too.

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:

http://bizthoughts.mikelee.org/a-modified-active-state-for-s...

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.

No discussion of CSS buttons will ever be complete without this fantastic tutorial: http://news.ycombinator.com/item?id=1255023

It actually explains how light reflections create this or that color/brightness and uses CSS to demonstrate the natural-looking layout.

I think the word "awesome" is not proper in this context. Those buttons are merely good enough and look rather shitty for my pixel perfect eye. Sorry.

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"

As pure CSS buttons, those at http://www.kurat.com/ are real nice.

Funny that their "View Demo" button does not use the buttons that the article is advocating. And ditto for the subscribe button on the right.

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.

Something that has been overlooked: 1px offset in the :active state

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.

These CSS buttons seem inferior to plain old sprited buttons, which give designers complete control and work perfectly in all browsers.

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

It would be great if someone could put together a collection of links to these different CSS3 button examples.

Here you can find more examples http://html5snippets.com/snippets?tag=button

Not really sold on the :active box-shadow--looks tacky and unnatural. Try more of a blur radius on it?

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.

And should have used correct grammar.

Sadly, looks significantly different in different browsers, IE most notably looks terrible.

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.

Does anyone know why these type of buttons seem to always use the anchor (a) tag instead of the the button tag? Or even perhaps form input?

Very nicely done. I like the use of the character icons instead of images. Not pixel-perfect, but surprisingly good.

Does anyone else think that they should have made a "Previous" button as well?

I like how they use glyph icons. Haven't seen that often before.

Reply on news.ycombinator.com