Button symbols provide an easy method for creating the type of interactive, multi-state button we're accustomed to seeing on the Web. Buttons have different images (referred to as states) that display based upon user action. The Up state displays by default; the Over state displays when the user moves the mouse over the button; and the Down state displays when the button is clicked. A fourth state, Hit, is never displayed but is used to define the active area of the button.
In most cases, you'll use the same graphic elements for all of your buttons. When you're working out the design, work with the text of the longest name you'll need. This ensures that the graphic fits all of your buttons and you won't have to make frustrating fixes later. In our project, we start with the Gallery button because it is just a little bit wider than Pricing.
