First: I'm not a designer by trade, but I do occasionally do design some things.

A week ago I began writing an open-source, extremely small (960 bytes gzipped/minified!) CSS framework. Since then it's matured somewhat into a stable and usable product. I've been showing it off and am quite proud of it.

One (non-design-minded) person I showed it to thought the buttons were ugly. Personally, I like their simple style and I think they look fine. However, he thought that the border+bevel on the button made them look like they were from Windows 95.

Here are the buttons - from minfwk.com:

An example of the buttons in question

If I remove the border & bevel I think they look less like buttons, but he says that they look better.

(This is interesting as I'm usually the proponent of flat design and he argues the reverse)

What's your view on the buttons? Are they buttonlike enough without the border and bevel? Are they "too old-fashioned" with the border/bevel? Are there other issues with them?

  • 2
    Please post link to the image (at imgur or elsewhere). Noone is going to visit links posted by a total stranger. What's more, your question is too broad and asks for personal opinions instead of answers. May 24, 2013 at 4:45
  • 1
    @DeerHunter So sorry! I couldn't post images yet as I didn't have enough rep. It looks like JohnGB edited it. Also, I wasn't sure how to phrase the question but it looks like three people did find good answers to write. May 24, 2013 at 11:13
  • 1
    Owen Versteeg, to tell you the truth, I don't like the colors of the buttons (maybe the blue one doesn't jar the eye, but the two others are a bit disappointing). May 24, 2013 at 11:48

5 Answers 5


The bevel gives the button some affordance and lets people know that they can interact with the object. If you have a completely flat design, you run into the problem of people not being able to tell the difference between a button and a block outside of contextual clues.

This has proven to be a justified concern with Windows Metro having this exact issue.

Even Android, which follows a flat design philosophy, has a bevel and shadow on their buttons to deal with affordance.
enter image description here

So, I would strongly advise that you don't drop all affordance indication from the buttons. That doesn't mean that it has to be a bevel and a shadow, but in my opinion, they are the most subtle options that still show affordance.

However, the border on the button does little to show affordance, and I would drop it in favour of a small shadow.


Conventions play important role for users to understand quickly what the UI element is, and what to do with it. This means button should look like a button and user should understand, act upon it. There are lot of styles for buttons which understands affordance.

Buttons serve purpose of showing what to act upon. Example, if you have a form to be filled and then you place buttons, it certainly conveys that the form will be submitted / Cleared depending on action with buttons.

Few can definitely argue that without border and bevel (or additional visual cue) these rectangular shaped hot spots might not look like button. But I think it depends on overall treatment of the button with respect to other page elements. Windows8 is very popular example these days. They have removed all the visual cues except plane color patch for their buttons. But certainly they have maintained it with other UI elements' styles and overall look and feel of the os.

In my opinion, the button style you have shared surely look like buttons. The border is thin and bevel is minimal. Bevel is not so 'IN' these days. If you increase it, it will look like old style buttons. But what you have shared is also fine. And if you remove it still you should be able to maintain it like buttons (additional cue can be hover).

However thin border should not be removed in that case.

  • I agree, I think flat buttons can sometimes lack affordance. Thanks for your feedback! One thought I had was that button-change-on-hover doesn't work on mobile; I've implemented the hover state for devices that support it. Thanks! May 24, 2013 at 11:40

Those who are concerned with usability are going to be "battling" (in a sense) the proponents of "flat" design, which seems to be a very popular trend right now. Many designers don't realize the decreased usability of overly flat designs, some are even making the case that it somehow increases clarity.

These people are wrong. The removal of visual cues (e.g. bevel on a button) makes a UI more difficult to understand. If everything is a flat, colored rectangle, it's not obvious which are controls and which are inert labels. Experimentation and thinking are needed to discover how it works.

Keep the visual cues (bevels and shadows and such) as subtle hints on the functionality of the UI.


Personally, I don't think your bevel is enough to make much difference at a glance. If you increased the bottom or top bevel (or both) you might have more to lose.

Even when designing in a flat motif, I like to imply some visually notable dimension on buttons. It doesn't have to come in the form of a bevel, though. A border, shadow, extrude, or even a slight gradient/highlight can work.

In the end, context is everything. The only real answer is to test it. Find a site with enough traffic to test your framework on. There's nothing like numbers to confirm your suspicions.

  • Thanks! I'll try to find a site popular enough that would like to use Min. I agree that user feedback is really important. May 24, 2013 at 11:41

I'm afraid I disagree. I didn't have an opinion about flat design vs. not-flat, old-style design, until I realized that these days I'm far more drawn to the very minimalistic simplicity and clarity of designs which utilize this flatness. And embarrassingly enough, I'm an artist and designer. I have never had a problem knowing that a button is a button, even when the page is flat as a pancake. It's all about how you implement this flatness, not whether to. I like all your solutions, Owen. Go with your instinct. Don't add any "real" bevels - these days, they'll be more off-putting than "affording."

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.