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.
8 Replies
I like this tutorial
http://webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/
To be honest states can be what you want them to be
You are wonderful! Thank you Phil!
When I make buttons I usually do the following (not always, but these are some general rules I tend to follow)
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. =)
I sometimes use internal shadows or the down state. When i used to do buttons for flash the down state was always two pixels down and 2 pixels across.
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.
Another helpful hint. Go for subtle changes. They are more effective than huge changes. (like using a completely different color)
Wonderful! Thank you guys!
If you do go with Gradients be consistent in their use, try and ensure the light source is the same on your project or slide
http://www.webdesignerdepot.com/2010/01/drop-shadows-and-gradients-be-consistent-in-your-visual-metaphors/
This is where a scratchbox is useful
This discussion is closed. You can start a new discussion or contact Articulate Support.