Using Gradients on Buttons Correctly

by on 08/20/10 at 7:06 pm

Gradients are commonly used on a user interface to give it a natural look and feel. When a single light source is lit from above it tends to mimic the sun. This effect gives objects depth in appearance, where users interpret the light areas as being closest to the light source and dark areas as being farthest from the light source. This is exceptionally useful on buttons.

  • Users see buttons that are light at the top and dark at the bottom as convex (pushed out).
  • Users see buttons that are dark at the top and light at the bottom as concave (pushed in).

A button in its natural state will be convex with a rounded surface, so that it indicates that the button has not been pushed in. When the user clicks on a button, it should look concave, so that it indicates that the user has pushed it in. This is the correct way to use gradients on buttons. Share this article with everyone you know, so that nobody ever has to look at an unnatural button gradient again.

5 Responses to “Using Gradients on Buttons Correctly”

  1. TheDomiero

    Sep 1st, 2010

    There should also be a hover state. When the cursor hovers over the button it should react in a subtle manner; a slight change in the brightness of the button should do it.

    What are your thoughts on this?

    • anthony

      Sep 20th, 2010

      I agree with you. A slight change in brightness makes for the perfect hover effect.

      • Khalid

        Jan 19th, 2011

        Another option is to make the border a bit darker on hover. I have seen this before and it works well.

  2. Kim Flintoff

    Sep 22nd, 2010

    I’ve honestly never registered it beyond a 2D perception. I still can’t see the convex/concave effect that this article describes. The gradient to me is simply a factor of shading and I don’t have a sense of the button being raised or depressed by dint of the shading.

    I would assert that this is too prescriptive – and makes big claims about human perception with no reference to any substantiating research.

    A quick survey of the office reveals that no-one in the 14 people here see this 3D effect.

    • anthony

      Sep 22nd, 2010

      I think you’re taking it too literally. The diagram is used to show the top to bottom lighting bias that people have. Gradients with color brightness at the top and darkness at the bottom make things look convex and things with darkness at the top and brightness at the bottom make things look concave. This is a principle that many designers use with buttons all around the web. It works this way because humans have a natural tendency to perceive light coming from above.

Leave a Comment