Just another awesome CSS3 buttons

http://www.red-team-design.com/just-another-awesome-css3-buttons

by redmaniack • 15 years ago

131 35 15 years ago

red-team-design.com

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

neoveller• 15 years ago

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

elii• 15 years ago

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.

ig1• 15 years ago

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.

jetbean2• 15 years ago

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

mikeleeorg2• 15 years ago

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.

mikeleeorg2• 15 years ago

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

ile• 15 years ago

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.

ladon86• 15 years ago

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

rbreve• 15 years ago

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

gvkv2• 15 years ago

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.

nawariata• 15 years ago

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.

gvkv2• 15 years ago

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.

muxxa• 15 years ago

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

FreshCode• 15 years ago

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.

thevivekpandey2• 15 years ago

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.

revorad• 15 years ago

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.

waitwhat• 15 years ago

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.

pbhjpbhj• 15 years ago

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?

ramanujam• 15 years ago

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.

wlievens• 15 years ago

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

atirip2• 15 years ago

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.

thevivekpandey2• 15 years ago

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"

atirip2• 15 years ago

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

josteink• 15 years ago

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.

yters• 15 years ago

And should have used correct grammar.

jetbean2• 15 years ago

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

SolarUpNote• 15 years ago

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

bluesnowmonkey• 15 years ago

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

bane• 15 years ago

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

DenisM• 15 years ago

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.

fatalerrorx3• 15 years ago

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

huhtenberg• 15 years ago

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.

ppog• 15 years ago

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

mixmastamyk2• 15 years ago

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.

mixmastamyk2• 15 years ago

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?

Just another awesome CSS3 buttons

Related Stories