Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Support
  • Download

›Introduction to Interactions

Installing and Activating RP

  • Activating Axure RP 10
  • Installing on macOS
  • Installing on Windows
  • Axure License Portal

Getting Started

  • Getting Started Video
  • The Axure RP Environment
  • Viewing and Sharing Your Prototypes
  • Keyboard Shortcuts
  • Auto-Saved Backup Files

Working with Widgets

  • Organizing Widgets
  • Widget Groups
  • Styling Widgets
  • Widget Libraries
  • The Grid, Guides, and Snapping

Basic Widgets

  • Buttons, Shapes, & Text
  • Images
  • Hot Spots
  • Lines & Arrows
  • Dynamic Panels
  • Inline Frames
  • Text Fields & Text Areas
  • Droplists
  • List Boxes
  • Checkboxes
  • Radio Buttons
  • Trees
  • Tables
  • Classic Menus
  • Snapshots

Working with Pages

  • Managing Pages
  • Styling Pages

Components

  • Creating and Using Components
  • Component Views
  • Raised Events

Introduction to Interactions

  • Events, Cases, and Actions
  • List of Events
  • List of Actions
  • Text Links
  • Style Effects
  • Animations

Advanced Interactions

  • Variables
  • Conditional Logic
  • Math, Functions, and Expressions
  • Selection Groups
  • Move Action Boundaries

The Repeater

  • Repeaters
  • Dynamically Adding Rows
  • Dynamically Deleting Rows
  • Updating Rows
  • Marking Rows
  • Sorting Rows
  • Filtering Rows
  • Pagination

Adaptive Views

  • Adaptive Views

Documenting Your Prototype

  • Page and Widget Notes
  • The Word Specification
  • Printing

Flow Diagrams

  • Flow Diagrams
  • Flow Connectors

Publishing Your Prototype

  • The Prototype Player
  • Customizing the HTML Output
  • Web Fonts and Font Mapping

Team Projects

  • Team Projects Overview
  • Creating and Sharing Projects
  • Working with Team Projects
  • Team Project History
  • Troubleshooting Team Projects
  • Upgrading RP 9 Team Projects to RP 10
  • Upgrading RP 8 Projects to RP 10

Style Effects

Style effects are alternative widget styles that are automatically applied to a widget while it's in a particular state in the web browser, such as while being moused over or clicked. When the widget enters the triggering state, the style effect is applied. When the widget exits the triggering state, the style effect is removed and the widget reverts back to its base styling.

Some common examples include:

  • text links gaining an underline when moused over
  • buttons changing colors when clicked
  • text fields gaining a different border color when focused or when error state is applied.

You can assign as many style effects to a widget as you'd like.

text link in the web browser

Tip

Check out the interactive button tutorial to learn how to use style effects with buttons.

The Style Effects

MouseOver

Applied when the mouse cursor is moved over the widget. (Added to text links by default.)

MouseDown

Applied when the widget is clicked, while the mouse button is pressed down. (Added to text links by default.)

Selected

Applied when the widget is set to its selected state with a Set Selected action or automatically when a checkbox or radio button is clicked.

Disabled

Applied when the widget is set to its disabled state by the Disable action. (Added to form widgets like text fields and droplists by default.)

Error

Applied when the widget is set to its error state by the * Error State Set** action.

Focused

Applied when the widget has focus in the web browser. Form widgets like text fields and droplists automatically gain browser focus when they're clicked on or tabbed to. You can also dynamically give a widget browser focus with the Focus action.

Hint

Defines the styling of the hint text on a text field or text area. (Enabled on these widgets by default.)

Enabling Style Effects

To enable a style effect on a widget:

  1. Select the widget and click Add Style Effect in the Shape Properties section of the Interactions pane.

  2. Choose your desired style effect from the list.

  3. In the block that appears, select the style properties you want to alter for the style effect.

    You can see the full list of style properties by clicking More Style Properties.

As you edit a style effect, the changes you make will be temporarily applied to the widget on the canvas. When you close the style effect's block in the Interactions pane, the widget will go back to its default styling.

Tip

If you want to use the same style effect selections for multiple widgets, create a widget style to hold your style selections. Then when you enable the style effect on a widget, select the widget style in the Widget Style dropdown.

If you make changes to the widget style in the future, the changes will be applied automatically to all widgets using it.

Copy and Paste Style Effects

You can copy and paste style effects from one widget to another with the format painter, available in the main menu at Edit → Format Painter.

← Text LinksAnimations →
  • The Style Effects
  • Enabling Style Effects
  • Copy and Paste Style Effects
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
Axure RP 10Axure CloudEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense Portal
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 9 Documentation and Tutorials
Copyright © 2002–2023 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.