[bbx]

Nowadays, I tend to avoid gradients because it's so easy to mess it up. It's not only about choosing 2 colors, it's about eveything that happens in between. Putting some text on top of it requires to be readable on both colors, and everything in between.

Buttons can have depth without gradients. Check the ones on http://www.facebook.com. A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around.

Depth is not only achieved through "3D" gradients and shadows. It is achieved in flat design through size, color, spacing. It's hierarchy by balance.

It's like a well-balanced music mix: if it sounds good on average level, it'll even sound better on loud level. Flat design is balance before the lighting tweaks.

[UnFleshedOne]

"A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around."

This is exactly how Windows 3.1 was drawing its UI. :) (not that there is anything wrong with that)

[rahoulb]

OT but I have a theory that the 3d button (which "depressed" when you clicked it) is the entire reason behind Windows 3's success. I can't remember if System 7 predates it but certainly the 3d effect on its buttons were less pronounced, and GEM was entirely flat.

[iclelland]

No, this is completely different. Modern. Revolutionary.

Facebook lighting is directly overhead; Windows 3.1 was off to the left a bit :)

[njharman]

I don't see any buttons on facebooks page. Just links, some with hover color changes. Are those the "buttons" you speak of?

[tiddchristopher]

I think you're looking at the wrong page. If you go to facebook.com while logged out, the "Log In" and "Sign Up" buttons use the technique described by the above poster.