Configuring the states of buttons

You can configure the four states of buttons and save the button state as the new default button style when adding a button. The four button states

• Normal, as the button exists when the page is displayed

• Over, when users pass their cursors over the button

• Down, when users click the button

• Disabled, when the button has become unclickable

For each state, you can change the shape style, alter the effects, and modify the text style.

You can customize the individual states or select to update each state automatically based on configuration of the Normal state.

You can also set the state of the button using the Set State action. For details, see Selecting the action. Assigning images to the down, over, and disabled states is optional. If you do not select images for the optional button states, the normal state image will be used.

To configure the button states:

1. In the Project Explorer, click the button graphic or in the work area, click the button object.

2. Click the Style ribbon.

3. Click the States button. The Button States window opens.

4. Use the controls in the Button States window as follows. Aside from the Shape field, the controls are the same for each state tab (Normal, Over, Down and Disabled).

   Shape	Select this to change the shape of the button. Select from a variety of different shapes, such as the basic shapes, block arrows, and stars, for example.
   Fill	The fill of the button. Use these controls to customize the fill of the button: Color Color of the fill. To change the color setting, you can select a predefined color, specify a custom color, or select an existing color. To select a predefined color, click one of the color samples displayed. To specify a custom color, select Custom and use the controls in the Color window to configure a custom color. To select an existing color, use the eyedropper to select an existing color on the current page in project. Gradient Gradient of the fill. To change the gradient, click Gradient and click a gradient type from the sub-menu. Texture Texture of the fill. To change the texture, click Texture and click a texture type from the sub-menu. To select a local file that contains a compatible texture, select Browse from File. To select a texture from the Media Library, select Browse My Media. Picture Picture for the fill. To change the picture, click or hover on Picture and click the location from which to choose the picture. To select a local file that contains a compatible picture, select Browse from File. To select a picture from the Media Library, select Browse My Media. Browse and select the picture. The picture is cropped within the shape. Additionally, the resource drop-down list in the Shape Style group is populated with the name of the fill picture. Use the resource drop-down list to change the fill picture. The Color, Gradient, Texture, and Picture fills are mutually exclusive. Selecting these will cancel/replace any previous selection or gradient. Opacity Transparency of the object from 0 (invisible) to 100 (completely opaque).
   Outline	The outline of the button. Use the controls in the Outline group as follows: Weight Thickness of the outline from 0 (none) to 20. Color Color of the outline. To change the color setting, you can select a predefined color, specify a custom color, or select an existing color. To select a predefined color, click one of the color samples displayed. To specify a custom color, select Custom and use the controls in the Color window to configure a custom color. To select an existing color, use the eyedropper to select an existing color on the current page in project. Style Style of the outline. Use the list to select from underscored, dashed, or dotted style.
   Text Style	The style of the text associated with the button. Use the controls as follows: Text Style Click this to select a text style to apply to the objects. Text styles automatically set text attributes such as the font face, style, size and color. Use the drop-down list to select a new text style and add and remove text styles. For details about managing text styles, see Managing text styles. (Font) Click this to select the text font face to apply to the objects. Use the drop-down list to select a new text font that overrides the currently selected text style. Selecting a new font overrides the font defined by the current text style. (Font size) Click this to select the text font size to apply to the objects. Use the drop-down list to select a new text size that overrides the currently selected text style. Selecting a new font size overrides the font size defined by the current text style. Text Color Click this to select the color of the text to apply to the objects. To change the color setting, you can select a predefined color, specify a custom color, or select an existing color. To select a predefined color, click one of the color samples displayed. To specify a custom color, select Custom and use the controls in the Color window to configure a custom color. To select an existing color, use the eyedropper to select an existing color on the current page in project. (Bold) Click this to select the bolding of text to apply to the objects. Selecting the bolding overrides the bolding defined by the current text style. (Italics) Click this to select the italicizing of text to apply to the objects. Selecting the italicizing overrides the italicizing defined by the current text style. (Underline) Click this to select the underline of text to apply to the objects. Selecting the underlining overrides the underlining defined by the current text style. Click this to align the text to the left. Click this to align the text to the center. Click this to align the text to the right. Click this to increase the size of the font. Click this to decrease the size of the font.

5. To customize an individual state, click the corresponding state tab (Normal, Over, Down, or Disabled) and click the button in the Style group so that the Custom graphic is displayed. Change the appropriate properties as necessary.

6. When you are finished customizing each state, click OK.

The button states are configured.

To save this button state as the new default button style when adding a button, either:

• In the Button Template group, click Save As Default

• Right-click on the button and select Save button as default template

Saving the style as the new default will only apply that default style when adding text buttons. New image buttons will not be affected. Image buttons will use the images of the states.

To reset the default style to the product default, click Reset Default in the Button Template group.

See also: Changing the text style of the button

Knowledge Base | Training | Support
© Copyright ELB Learning 2025