5 ms·

Just another awesome CSS3 buttons

131 points by redmaniack 15y ago

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

wlievens 15y ago
I like how they use glyph icons. Haven't seen that often before.
neoveller 15y ago
Not really sold on the :active box-shadow--looks tacky and unnatural. Try more of a blur radius on it?
elii 15y 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 15y 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.
- jetbean 15y ago
  From a programmer's point of view, they look good. I think they would look great on a minimal-like design.
- mikeleeorg 15y 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.
  - mikeleeorg 15y 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-some-other-awesome-css3-buttons.html http://bizthoughts.mikelee.org/a-modified-active-state-for-s...
- ile 15y 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 15y ago
It would be great if someone could put together a collection of links to these different CSS3 button examples.
- rbreve 15y ago
  Here you can find more examples http://html5snippets.com/snippets?tag=button http://html5snippets.com/snippets?tag=button
gvkv 15y 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 15y 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.
  - gvkv 15y 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 15y ago
Something that has been overlooked: 1px offset in the :active state
FreshCode 15y 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.
thevivekpandey 15y 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 15y 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 15y 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 15y 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 15y 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.
atirip 15y 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.
- thevivekpandey 15y 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"
  - atirip 15y ago
    As pure CSS buttons, those at http://www.kurat.com/ http://www.kurat.com/ are real nice.
josteink 15y 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 15y ago
  And should have used correct grammar.
jetbean 15y ago
Does anyone else think that they should have made a "Previous" button as well?
SolarUpNote 15y ago
Very nicely done. I like the use of the character icons instead of images. Not pixel-perfect, but surprisingly good.
bluesnowmonkey 15y ago
These CSS buttons seem inferior to plain old sprited buttons, which give designers complete control and work perfectly in all browsers.
bane 15y ago
Sadly, looks significantly different in different browsers, IE most notably looks terrible.
DenisM 15y ago
No discussion of CSS buttons will ever be complete without this fantastic tutorial: http://news.ycombinator.com/item?id=1255023 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 15y 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 15y 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 http://dribbble.com/shots/239089-Dialoggs-Login-Animated [2] http://dribbble.com/shots/201485-Yo-check-it-iOS-UI- http://dribbble.com/shots/201485-Yo-check-it-iOS-UI- [3] http://dribbble.com/shots/173658-To-project http://dribbble.com/shots/173658-To-project [4] http://dribbble.com/shots/191108-Let-there-be-sense- http://dribbble.com/shots/191108-Let-there-be-sense- [5] http://dribbble.com/shots/199327-iPad-app-sneak-peak http://dribbble.com/shots/199327-iPad-app-sneak-peak [6] http://dribbble.com/shots/98510-Starred-Checked-Action-Buttons 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 15y 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."
- mixmastamyk 15y 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.
mixmastamyk 15y 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?

131 points by redmaniack 15y ago

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

wlievens 15y ago

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

neoveller 15y ago

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

elii 15y 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 15y 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.
jetbean 15y ago
From a programmer's point of view, they look good. I think they would look great on a minimal-like design.
mikeleeorg 15y 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.
- mikeleeorg 15y 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-some-other-awesome-css3-buttons.html http://bizthoughts.mikelee.org/a-modified-active-state-for-s...
ile 15y 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 15y ago

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

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

gvkv 15y 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 15y 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.
- gvkv 15y 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 15y ago

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

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

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

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

thevivekpandey 15y 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"
- atirip 15y ago
  As pure CSS buttons, those at http://www.kurat.com/ http://www.kurat.com/ are real nice.

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

jetbean 15y ago

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

SolarUpNote 15y ago

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

bluesnowmonkey 15y ago

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

bane 15y ago

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

DenisM 15y ago

No discussion of CSS buttons will ever be complete without this fantastic tutorial: http://news.ycombinator.com/item?id=1255023 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 15y 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 15y 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 http://dribbble.com/shots/239089-Dialoggs-Login-Animated [2] http://dribbble.com/shots/201485-Yo-check-it-iOS-UI- http://dribbble.com/shots/201485-Yo-check-it-iOS-UI- [3] http://dribbble.com/shots/173658-To-project http://dribbble.com/shots/173658-To-project [4] http://dribbble.com/shots/191108-Let-there-be-sense- http://dribbble.com/shots/191108-Let-there-be-sense- [5] http://dribbble.com/shots/199327-iPad-app-sneak-peak http://dribbble.com/shots/199327-iPad-app-sneak-peak [6] http://dribbble.com/shots/98510-Starred-Checked-Action-Buttons 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 15y 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."
mixmastamyk 15y 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.

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