

Just another awesome CSS3 buttons - redmaniack
http://www.red-team-design.com/just-another-awesome-css3-buttons
In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.
======
huhtenberg
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...](http://dribbble.com/shots/98510-Starred-Checked-Action-Buttons)

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

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

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

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

~~~
mikeleeorg
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...](http://bizthoughts.mikelee.org/a-modified-active-state-for-some-
other-awesome-css3-buttons.html)

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

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

~~~
thevivekpandey
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"

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

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

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

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

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

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

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

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

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

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

------
josteink
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
And should have used correct grammar.

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

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

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

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

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

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

