Knowledge Base

How to design the different states of a button

Buttons have three possible states, rollover, pressed and selected. These states define how the button will appear when it is rolled over by the mouse cursor, when the mouse button is pressed down while over it and when it is selected. You can change all of the buttons style options to get any effect you like. In this example we will add a shadow to the button's pressed state so that it will look like a physical button being pressed.


1. Once the normal state of the button is complete select it and click the Style tab on the upper menu toolbar.

2. Click the States button.

3. Click Pressed

4. The editor is now in design state mode (indicated by the mode bar at the top of the editor window) and changes made to elements on the page will only appear when the button is pressed.

5. Design the button's pressed state (here we have added an inner shadow to give a pressed appearance).

6. Click Apply when done.

Test the design state by entering preview mode and pressing the button.