Styling clean flat-design buttons so they show affordance, and look ‘well designed’

I started a tiny CSS framework recently. ( if anyone’s interested) I quickly banged out an initial design for some buttons. After asking for feedback on UX StackExchange (and receiving lots of good feedback), I was recommended to come here for additional advice on improving them.

This is what they look like right now, after UXStackExchange’s feedback. I removed the black border, added a 3px “shadow”, and removed the 1px bevel:

enter image description here

I’m going for a flat-design look.

I have 3 remaining questions:

  • Do these buttons show enough affordance? (This seems to be a problem with flat design)
  • Would you suggest adding a small gradient?
  • Do they look well-designed? (subjective I know, but I can’t think of a better way to ask this)

I’ll gladly welcome (and probably use) any feedback on these buttons.


I think a very subtle gradient will definitely improve the aesthetics of the buttons. Since the Windows 8 “Metro” style is a large proponent of this style, I’ll use that as an example:

Apps for Windows 8

At first glance the “tiles” look like they are a flat color, but if you look closely there is a very slight gradient going left to right. It is more noticeable on some than others, but they all have it. As Yisela said, you want this gradient to be barely noticeable, almost subconscious.

Source : Link , Question Author : Owen Versteeg , Answer Author : JohnB

Leave a Comment