You can now create a rich, interactive button with a rollover, mouse down, and selected styles.

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.

Go to Interactive Button Tutorial

While the rollover and mouse down styles automatically apply when you mouse over or mouse down on the widget, you need to use the “Set Widget(s) to Selected State” action in order to apply the selected style. And the "Disable Widget" action to apply the disabled style.

Selection Groups: You can also assign button shapes and images to selection groups so they behave like radio buttons when they are set to their selected state. To do this, select a group of button shapes/images, right-click and choose Edit Button Shape/Image -> Assign Selection Group and give the group a name. In the prototype, when one widget in a selection group is set to its selected state, the other widgets are automatically set back to their default state.

See the Page Load Interactions article to learn how to highlight a navigation item on the load of a page.

To add and edit widget styles, right-click the widget and choose from the “Edit [widget type]” submenu. The styles available include:

          Rollover: When the cursor moves over the widget.

          Mouse Down: When the mouse is clicked down on the widget.

          Selected: When the widget is set to its selected state (used in combination with interactions – see “Interactions and Widget Styles” below).

          Disabled: When the widget is disabled (used in combination with interactions – see “Interactions and Widget Styles” below).

Choosing one of the styles from the context menu opens the Set Style dialog where you can select the formatting properties to apply and configure them.

TIP: When you check a text style like Bold or Italic, toggle the button to the right to set the property to "on".

You can preview the style by selecting “Preview” at the bottom of the dialog. When you finish styling the widget, click “OK”.

To preview the style in the wireframe, interact with the black/white square in the top left corner of the widget. For example, when you mouse down on the black/white square it will show the mouse down style on the widget.

In this article, learn how to apply rollover, mouse down, selected and disabled styles to widgets.

In addition to the default style, you can edit additional styles on image, button shape, rectangle, and menu widgets like rollover and selected. In the prototype, rollover styles are applied automatically, and selected styles can be applied using interactions to do things like highlight a navigation item.

Have questions? Drop us a line at support@axure.com, tweet us at @axurerp, or write on our Facebook wall.

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