: Styling clean flat-design buttons so they show affordance, and look 'well designed' I started a tiny CSS framework recently. (http://mincss.com if anyone's interested) I quickly banged out an initial

@Sims5801359

The buttons look good, however the kind of buttons that show affordance and feel in the general flat style are once where the shadow part is placed is a small strip at the bottom of the main element (button) and is mostly a darker shade of the button color.

Vote Up Vote Down

@Reiling762

While I can respect making such minimal buttons you really need to consider if/how they can be applied across the web on different websites, as you are making a framework. If you are providing buttons you need to make sure to provide just about everything else someone might use like tables, forms, etc. (Which I'm sure you're still working on).

Take a look at Bootstrap if you haven't already. Bootstrap is a wonderfully simple and clean CSS framework that can be easily adapted or integrated into another website and might give you some ideas.

Now as far as these actual buttons go I would play around with a border, as this helps encapsulate the component and a border is pretty common to a lot of buttons. I checked out the website and I do like the hover/click states and I think you did well with those.

If you want to introduce gradients, be consistent and make sure you use them on other elements as well, else you'll have competing depths which will just be distracting.

Vote Up Vote Down

@Ravi4787994

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:



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.

Vote Up Vote Down

@Reiling762

As you mentioned, when designing flat buttons you need to keep an eye on a couple of things. The first one being, I'd say: Does it look like a button?

This is not necessarily something that depends only on the button, but on the rest of the elements of your UI. If you are using flat buttons, I'd suggest you avoid similar shapes/styles everywhere else. You need to maintain a visual vocabulary so people can instantly recognize these elements as buttons and not something else.

Shadows are good for this, because they give an impression of volume. Therefore, they are easier to see. Plus, we are used to buttons having that effect. I would however consider using a color that is similar to the button's color. For example, instead of using black for the red button, use a red with 50% opacity. Another option to make buttons more obvious is to add an icon (white, solid).

I'd be very careful with gradients. Not because they are bad, but because in the current super simple flat trend, they don't fit that well. Especially if the colors or shades you use are very different. A small gradient can look really nice, but it has to be tiny, barely noticeable.

In short, I like the way they look. I would only change the shadow color to something lighter, and maybe make the foreground text lighter too, white probably. The font is nice and you are using good padding, so nice job! I see you are using them in the site, but below them you have a set of notifications in pastel colors that actually look a bit similar. I'd reconsider their style, as they can be a bit confusing, and I'd try to use the same colors throughout the site (all pastels, or all contrast).

Vote Up Vote Down