Making a shape look like a button

Apr 09, 2013

Hi,

I understand how to edit states of a shape, but I'm getting stuck with knowing what format/design to use for each state!

Anyone got any general rules?

Thanks

Rachel

8 Replies
Nicole Legault

When I make buttons I usually do the following (not always, but these are some general rules I tend to follow)

  • Use a thin 1 px border (sometimes dotted or dashed).
  • Use a soft gradient.
  • Use a drop shadow (the drop shadow makes it look raised, and more like a real button).
  • Leave a lot of whitespace around the text on the button.
  • For various states I usually do varying shades of the same color (but different enough so it's noticeable). 
  • I usually go a few shades darker for the "Hover" state, and sometimes invert the gradient to give it a "pressed" look.
  • A very light shade for "Disabled" button state (might also have to lighten the font color here).
  • Sometimes just changing the color of the font to a few shades darker is great for "Visited" state.

I found some really good tips in this article: How to Design Buttons to Help Improve Usability 

And I also found some good tips on designing buttons from Web Design Tuts: Principles for Successful Button Design

One more tip, do a Google Images search on "Button States" and you'll see a lot of different examples and ideas. =)

David Anderson

The general rule I like to follow is: Hover-highlight and Down-darken

Hover: highlight or "raise" the graphic on hover. The graphic reaches up to say "Pick me!" Usually adding a gradient from light (top) to dark (bottom) works.

Down:  darken or lower the graphic on down or selected. Sometimes flipping the hover gradient works. Adding an inset shadow also works.

This discussion is closed. You can start a new discussion or contact Articulate Support.