6 ms·

Make CSS3 buttons that are extremely fancy

117 points by ssclafani 16y ago

Griever 16y ago
These are nice, but I still find that Zurb's example's are still the best out there. http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba http://www.zurb.com/article/266/super-awesome-buttons-with-c... I use them on nearly all of my projects.
- bemaniac 16y ago
  The main difference is that these buttons require no images, while the Zurb ones still require an image. The lack of images makes the buttons highly scalable.
  - kasted 16y ago
    really easy to convert them to linear gradients though...
  - Griever 16y ago
    Agreed. That is their main downside but honestly I haven't had any issues with them setup that way. I've been reusing them for both images big and small and it seems to come out alright.
  - charliepark 16y ago
    On Github there's a version of the Zerb buttons that's pure CSS. I haven't tried it in IE, but it looks good on Safari and Firefox: http://github.com/gr2m/awesome-buttons http://github.com/gr2m/awesome-buttons.
- ronnier 16y ago
  I like these[1] for webkit browsers. I'm using them on http://ihackernews.com http://ihackernews.com for the login and reply buttons. [1] http://mwhenry.com/blog/2009/11/shiny-css-only-iphone-buttons/ http://mwhenry.com/blog/2009/11/shiny-css-only-iphone-button...
- aaroneous 16y ago
  I know that article is a little old so it advocates a png, but today Safari, Chrome, IE and Moz all support gradients (albeit each in their own way).
DenisM 16y ago
Another great button tutorial: http://news.ycombinator.com/item?id=1255023 http://news.ycombinator.com/item?id=1255023
seanalltogether 16y ago
Something about the corners of the button are really bugging me.
- jws 16y ago
  Concur. Those lower corners have serifs on the first two and gaps on the third.
  - norova 16y ago
    In a live demo of the buttons in Chrome those irregularities are not present. I think it might be a Safari thing? Either that or JPEG compression artifacts.
coderdude 16y ago
How hard is it to upload a demo page? I can't stand CSS tutorials with screenshots or images as a demo.
- jjcm 16y ago
  http://jjcm.org/css3-buttons/ http://jjcm.org/css3-buttons/ Here's a demo page. I agree though, ridiculous that it didn't include one. edit - tried them in IE6/7, they don't degrade that gracefully. They exist and work fine as buttons, but visually it's hard to tell that they are. If you use this I'd recommend adding a :hover on the span's background color as well just so a user knows to click the thing.
- photon_off 16y ago
  That's pretty annoying. Up there with company blogs that don't actually link to the company website.
bradgessler 16y ago
For those SaSS fans out there checkout compass's CSS3 gradient helpers (http://compass-style.org/docs/reference/compass/css3/gradient/ http://compass-style.org/docs/reference/compass/css3/gradien...). Compass does not include the dx filters, but that would be an excellent thing for that lib to support. Also, the markup Posterous uses is more verbose than it needs to be. We figured out a way use plain 'ol <button/> or <a/> tags and style them as buttons. Maybe I'll blog about that when we roll this stuff out. Visually, those buttons look good.
- Eugene3v 16y ago
  This looks very cool, however it doesn't seem to work in IE... :(
metamemetics 16y ago
> Made with pure CSS3 False. Webkit extensions, mozilla extensions, and internet explorer extensions are NOT pure CSS3. They are ugly browser hacks. This is hard-coded to only work on the Big 3 and will never work on Opera, thanks for not supporting browser freedom.
- ubernostrum 16y ago
  These are vendor-prefixed implementations of features which are present in the current drafts of future editions of the relevant standards. As such, they are neither an "ugly browser hack" nor an attack on "freedom"; in fact, this is the way it's supposed to happen. Once the standards go final and the browsers get compliant implementations, the vendor prefixes will go away. So... how about you get that big chip off your shoulder and let people get on with their work?
  - metamemetics 16y ago
    Author: >To achieve these effects, I needed a small truckload of CSS You: >Once the standards go final and the browsers get compliant implementations, the vendor prefixes will go away. So the implementation is excessively long, temporary, and to be changed to something more standards compliant at a later date. Seems like the definition of "ugly hack" to me. And I'm not talking about supporting an outdated browser like IE6 here. I'm talking about a browser whose public releases support more "pure CSS3" than both Gecko and WebKit.
    - ubernostrum 16y ago
      So the implementation is excessively long, temporary, and to be changed to something more standards compliant at a later date. Seems like the definition of "ugly hack" to me. The idea is that until the standard goes final and the implementation has been checked against it, you can't know that the implementation is correct or even that the syntax for the feature will be the same in the final version. So rather than yank the rug out from under people later on, you use a vendor prefix until the standard is finalized and the implementation's checked out. Then people can drop the vendor prefix. I'm talking about a browser whose public releases support more "pure CSS3" than both Gecko and WebKit. And... well, Opera's doing it wrong. CSS3 is not finalized. CSS3 may go final with subtle or even significant differences from the current spec. And then anyone who relied on Opera's implementation and patted themselves on the back for being so ahead of the game will instead be up a creek.
josefresco 16y ago
I love how the author includes a line within the article that pretty much sums up the insanity of using pure CSS to create buttons ... "a small truckload of CSS" A designer could replace that truckload of CSS with 1 image and 1 line of code. We gotta stop sometimes and think .. what are we trying to achieve exactly? Strikes me almost as an extreme diet that excludes 100% of fat from your intake just for the sake of having no fat irregardless if it's healthy or causes you to lose weight. But in the "cool project" nerdy line of thinking .. it's pretty neat.
- amackera 16y ago
  Well for one thing the buttons are scalable, unlike images. Also I imagine that the truckload of CSS still comes in way smaller than the required image(s). If someone's willing to take the time to figure it out, it is not wasted. If indeed it is more efficient to draw buttons this way than to use an image, it makes sense to do this.
- ugh 16y ago
  Three images, actually (normal, hover and active). Six if you have buttons in two different colors. Twelve if you need the buttons in two different sizes. You need a truckload of CSS to define how a button looks but you only need to do it once. Creating arbitrarily colored and sized buttons is as easy as adding one or two lines of CSS. And at some point in the future we will actually be able to drop the prefixes and the CSS will become quite elegant and compact.
  - rimantas 16y ago
    Well, you can still do it with one image (CSS sprites and kind of "sliding doors" technique), however an image is one more resource to maintain, and that "truckload" of CSS in reality is smaller than HTTP request headers of an addtional request for said image (even if responese is 304 Not Modified). Sure, you can properly set Expires into far future and save request for repeated visitors, but then you will need to come with a versioning scheme. All in all, CSS way is simpler and easier to maintain. Add some more bling with CSS transforms, e.g. some nifty color fade/shift on hover and it gets realy tough for an image based solution to stand a chance.
pornel 16y ago
I'm proud of such button I've implemented on http://imageoptim.pornel.net/ http://imageoptim.pornel.net/ Here's unminified CSS: http://pastie.org/1097542 http://pastie.org/1097542
amadiver 16y ago
It's kinda strange to me that CSS devs (designers? devigners?) would violate DRY in such an egregious way every time they want to create a gradient: background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20))); background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99dcdcdc', endColorstr='#33000000'); I don't work with CSS extensively; is there a better way?
wmeredith 16y ago
This is a great article, thanks for sharing.

117 points by ssclafani 16y ago

These are nice, but I still find that Zurb's example's are still the best out there. http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba http://www.zurb.com/article/266/super-awesome-buttons-with-c... I use them on nearly all of my projects.

bemaniac 16y ago
The main difference is that these buttons require no images, while the Zurb ones still require an image. The lack of images makes the buttons highly scalable.
- kasted 16y ago
  really easy to convert them to linear gradients though...
- Griever 16y ago
  Agreed. That is their main downside but honestly I haven't had any issues with them setup that way. I've been reusing them for both images big and small and it seems to come out alright.
- charliepark 16y ago
  On Github there's a version of the Zerb buttons that's pure CSS. I haven't tried it in IE, but it looks good on Safari and Firefox: http://github.com/gr2m/awesome-buttons http://github.com/gr2m/awesome-buttons.
ronnier 16y ago
I like these[1] for webkit browsers. I'm using them on http://ihackernews.com http://ihackernews.com for the login and reply buttons. [1] http://mwhenry.com/blog/2009/11/shiny-css-only-iphone-buttons/ http://mwhenry.com/blog/2009/11/shiny-css-only-iphone-button...
aaroneous 16y ago
I know that article is a little old so it advocates a png, but today Safari, Chrome, IE and Moz all support gradients (albeit each in their own way).

DenisM 16y ago

Another great button tutorial: http://news.ycombinator.com/item?id=1255023 http://news.ycombinator.com/item?id=1255023

seanalltogether 16y ago

Something about the corners of the button are really bugging me.

jws 16y ago
Concur. Those lower corners have serifs on the first two and gaps on the third.
- norova 16y ago
  In a live demo of the buttons in Chrome those irregularities are not present. I think it might be a Safari thing? Either that or JPEG compression artifacts.

coderdude 16y ago

How hard is it to upload a demo page? I can't stand CSS tutorials with screenshots or images as a demo.

jjcm 16y ago
http://jjcm.org/css3-buttons/ http://jjcm.org/css3-buttons/ Here's a demo page. I agree though, ridiculous that it didn't include one. edit - tried them in IE6/7, they don't degrade that gracefully. They exist and work fine as buttons, but visually it's hard to tell that they are. If you use this I'd recommend adding a :hover on the span's background color as well just so a user knows to click the thing.
photon_off 16y ago
That's pretty annoying. Up there with company blogs that don't actually link to the company website.

bradgessler 16y ago

For those SaSS fans out there checkout compass's CSS3 gradient helpers (http://compass-style.org/docs/reference/compass/css3/gradient/ http://compass-style.org/docs/reference/compass/css3/gradien...). Compass does not include the dx filters, but that would be an excellent thing for that lib to support. Also, the markup Posterous uses is more verbose than it needs to be. We figured out a way use plain 'ol <button/> or <a/> tags and style them as buttons. Maybe I'll blog about that when we roll this stuff out. Visually, those buttons look good.

Eugene3v 16y ago
This looks very cool, however it doesn't seem to work in IE... :(

metamemetics 16y ago

> Made with pure CSS3 False. Webkit extensions, mozilla extensions, and internet explorer extensions are NOT pure CSS3. They are ugly browser hacks. This is hard-coded to only work on the Big 3 and will never work on Opera, thanks for not supporting browser freedom.

ubernostrum 16y ago
These are vendor-prefixed implementations of features which are present in the current drafts of future editions of the relevant standards. As such, they are neither an "ugly browser hack" nor an attack on "freedom"; in fact, this is the way it's supposed to happen. Once the standards go final and the browsers get compliant implementations, the vendor prefixes will go away. So... how about you get that big chip off your shoulder and let people get on with their work?
- metamemetics 16y ago
  Author: >To achieve these effects, I needed a small truckload of CSS You: >Once the standards go final and the browsers get compliant implementations, the vendor prefixes will go away. So the implementation is excessively long, temporary, and to be changed to something more standards compliant at a later date. Seems like the definition of "ugly hack" to me. And I'm not talking about supporting an outdated browser like IE6 here. I'm talking about a browser whose public releases support more "pure CSS3" than both Gecko and WebKit.
  - ubernostrum 16y ago
    So the implementation is excessively long, temporary, and to be changed to something more standards compliant at a later date. Seems like the definition of "ugly hack" to me. The idea is that until the standard goes final and the implementation has been checked against it, you can't know that the implementation is correct or even that the syntax for the feature will be the same in the final version. So rather than yank the rug out from under people later on, you use a vendor prefix until the standard is finalized and the implementation's checked out. Then people can drop the vendor prefix. I'm talking about a browser whose public releases support more "pure CSS3" than both Gecko and WebKit. And... well, Opera's doing it wrong. CSS3 is not finalized. CSS3 may go final with subtle or even significant differences from the current spec. And then anyone who relied on Opera's implementation and patted themselves on the back for being so ahead of the game will instead be up a creek.

josefresco 16y ago

I love how the author includes a line within the article that pretty much sums up the insanity of using pure CSS to create buttons ... "a small truckload of CSS" A designer could replace that truckload of CSS with 1 image and 1 line of code. We gotta stop sometimes and think .. what are we trying to achieve exactly? Strikes me almost as an extreme diet that excludes 100% of fat from your intake just for the sake of having no fat irregardless if it's healthy or causes you to lose weight. But in the "cool project" nerdy line of thinking .. it's pretty neat.

amackera 16y ago
Well for one thing the buttons are scalable, unlike images. Also I imagine that the truckload of CSS still comes in way smaller than the required image(s). If someone's willing to take the time to figure it out, it is not wasted. If indeed it is more efficient to draw buttons this way than to use an image, it makes sense to do this.
ugh 16y ago
Three images, actually (normal, hover and active). Six if you have buttons in two different colors. Twelve if you need the buttons in two different sizes. You need a truckload of CSS to define how a button looks but you only need to do it once. Creating arbitrarily colored and sized buttons is as easy as adding one or two lines of CSS. And at some point in the future we will actually be able to drop the prefixes and the CSS will become quite elegant and compact.
- rimantas 16y ago
  Well, you can still do it with one image (CSS sprites and kind of "sliding doors" technique), however an image is one more resource to maintain, and that "truckload" of CSS in reality is smaller than HTTP request headers of an addtional request for said image (even if responese is 304 Not Modified). Sure, you can properly set Expires into far future and save request for repeated visitors, but then you will need to come with a versioning scheme. All in all, CSS way is simpler and easier to maintain. Add some more bling with CSS transforms, e.g. some nifty color fade/shift on hover and it gets realy tough for an image based solution to stand a chance.

pornel 16y ago

I'm proud of such button I've implemented on http://imageoptim.pornel.net/ http://imageoptim.pornel.net/ Here's unminified CSS: http://pastie.org/1097542 http://pastie.org/1097542

amadiver 16y ago

It's kinda strange to me that CSS devs (designers? devigners?) would violate DRY in such an egregious way every time they want to create a gradient: background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20))); background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99dcdcdc', endColorstr='#33000000'); I don't work with CSS extensively; is there a better way?

wmeredith 16y ago

This is a great article, thanks for sharing.