This tutorial shows how to style a button shape widget with rollover, mouse down, and selected styles. And uses the Set Widget(s) to Selected State action to show the selected style.

Widget Styles Tutorial

Interactive Button

Rollover, Selected, and More

Now that you can add rollover, mouse down, and selected styles to button shapes, try it on images.

First, open InteractiveButton.rp and open the "Interactive Button" page.

Right-click on the button shape and select Edit Button Shape > Edit Rollover Style to open the Set Rollover Style dialog. 

In the dialog, click the checkbox next tor Underline and click the Underline toggle button. This will make the text in the button shape underlined when the mouse moves over the button. Check the Preview checkbox if you'd like to preview the effect.

Click OK to close the dialog. 

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureInteractiveButton.zip)

This zip file contains the RP file needed to complete this tutorial

When  a widget has a rollover, mouse down, or selected style, a half white, half black square appears in the top left cover of the widget.  Rolling over and clicking the white triangle allows you to preview the various styles.

Now let's set the Mouse Down style that will be applied while pressing down on the button with the mouse button.

Right-click on the button shape and select Edit Button Shape > Set Mouse Down Style.  Let's add underline again and also add a light grey fill color by clicking the checkbox and selecting the color from the color selector. Click OK to close the dialog.

The selected style will show when a button is changed to it's selected state.  It is most often used to specify which page the user is currently on in conjunction with an OnPageLoad. 

Right-click the button and select Edit Button Shape > Set Selected Style.  Select the underline checkbox and toggle button, and add a darker grey.

Click OK to close the dialog.

Add a case to the OnClick event with the action to Set Widget(s) to Selected State. Then check the checkbox next to MyButton.

Generate the prototype and test out the rollover, mouse down, and selected styles.

Step 1: Open Set Rollover Style dialog

Step 2: Edit the Rollover Style

Tip: Preview the style

Step 3: Edit the Mouse Down style

Step 4: Edit the Selected style

Step 5: OnClick, set the button to selected

Next: Menu & Tree Widgets Article

Back to Widget Styles