© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

 

 

INTERACTIVE BUTTON

Make an interactive button using the MouseOver, MouseDown, Selected, and Disabled interaction styles.

Then, add interactions to set the button to its Selected and Disabled styles.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

Start by configuring your interaction styles on the button.


The first two interaction styles, MouseOver and MouseDown, work automatically, without the need to build an interaction. Whenever there is a MouseOver style on a widget, the widget will change to that visual style while the cursor is over the widget. The MouseDown style temporarily shows while the mouse button is clicked with the cursor over the widget. The next two, Selected and Disabled, require you to build an interaction in order to make use of them.

STEP 1: ADD INTERACTION STYLES

Open AxureTraining.rp, and then open the the page "Interactive button" on the canvas for editing. The page contains one button, with a green fill color.


Click the button to select it. Use the name field at the top of the Inspector to give the widget the name "Interactive button".


In the Properties tab, under the "Interaction Styles" heading, click "MouseOver" to open the "Set Interaction Styles" dialog's "MouseOver" tab.


Click the "Fill Color" checkbox to select it. Any style properties checked in this dialog will override the default styling of that style property of the widget.


Open the color picker and specify color 05AE03, a vibrant green.


Notice that the widget shows the MouseOver style while the MouseOver tab is open.

Switch to the "MouseDown" tab of the Interaction Styles dialog. Set the MouseDown fill color to 52CDE6, a bright blue. In the "Selected" tab, specify fill color B822C5, a brilliant purple. In the "Disabled" tab, choose fill color DDDDDD, a light grey.


Click "OK" to close the Set Interaction Styles dialog.

STEP 2: PREVIEW

Click the "Preview" button in the Main Toolbar to preview the page in the browser. It's a good idea to periodically preview your diagram in the browser to make sure it's shaping up as intended.


In the browser, hover your cursor over the button to see the MouseOver style. Then click and hold on the button to see the MouseDown style.

The Selected style is only applied dynamically, when an interaction sets the widget to its Selected state using the "Set Selected" action. Similarly, the Disabled style is only applied when an interaction sets the widget to its Disabled state using the “Disable” action.


At the top of the properties tab, double-click "OnClick" to open the Case Editor for a new OnClick interaction.


In the left column, click "Set Selected/Checked" to choose that action.


In the right column, locate "Interactive button" and click the checkbox to select it. Alternatively, you can choose the "This Widget" option, since we're building an interaction where a widget performs an action on itself.


At the bottom of this column you'll see the text "Set selected state to" and then two dropdowns. The first dropdown is set to "value" and the second is set to "true." We can leave these droplists just as they are.


Click "OK" to close the dialog.

STEP 3: SET SELECTED

STEP 4: PREVIEW

Click Preview to see this interaction in the browser.


In the browser, click the button. You'll first see the MouseOver style, briefly see the MouseDown style, and then see the Selected style.

STEP 5: SET DISABLED

Now let's change the interaction a little so that instead of selecting it, clicking the button disables it.


The OnClick case we created is called "Case 1". Double-click the label "Case 1" in the Properties tab to open it for editing.


In the center column, labeled "Organize Actions," single-click the “Set Selected” action and and then hit the [DEL] key to delete that action from the case.


In the left column, choose the action "Enable/Disable."


In the right column, click either the checkbox for "Interactive button" or the one for "This Widget".


You'll see two radio buttons at the bottom of this column: Enable and Disable. Choose "Disable."


Click "OK" to close the dialog.

STEP 6: PREVIEW

Preview the page.


Click the button to disable it. You'll see the disabled state.

BUTTON

CORE TRAINING

TUTORIALS