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 are: Normal, as the button exists when the page is initially displayed, Over, when the users pass their cursors over the button, Down, when the button is clicked, and Disabled, when the button is disabled. 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.

  • By default, buttons that you have added to your title are set to be initially enabled. That is, buttons appear clickable when users open the pages on which the button are located. You can initially disable a button until an action has been executed to enable the button. For details, see Making a button initially disabled.

  • You can also set the state of the button using the Set State action. For details, see Selecting the action.

  • Assigning images to the over, down, 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 Title 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.
    Shape Style

    The style of the shape of the button. Use the controls in the Shape Style group as follows:

    Fill Style

    Fill style, such as color, gradient, texture or picture. 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, click Select and use the eye-dropper to click-to-select a new color from an existing color currently displayed on your desktop.

    To change the gradient, click or hover on Gradient and click a gradient type from the sub-menu. To change the gradient settings such as the direction, color, and angle, click More Gradients. This opens the Gradient dialog. Use controls on the Gradient dialog as follows:

    Color Color of the gradient. 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, click Select and use the eye-dropper to click-to-select a new color from an existing color currently displayed on your desktop.
    Type Type of gradient.
    Direction Direction of the gradient relative to the object.
    Angle Angle of the gradient relative to the object.
    Gradient Stops Use the Add Stop and Delete Stop buttons to manage the stops for the gradient. Click Reverse Gradient to reverse the color order in the gradient. Use the Stop Color control to select the color of each stop on the gradient. Use the Position control to set the position percentage of the gradient.

    To change the texture, click or hover on Texture and click a texture type from the sub-menu. To select a local file that contains a compatible texture, select Browse for File. To select a texture from the Media Library, select Browse My Media.

    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 for 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.

    Texture and picture fills are mutually exclusive. Selecting these will cancel/replace any previous selection. The background color and/or gradient can be changed beneath a transparent image.
    Outline Weight Thickness of the outline from 0 (none) to 20. Click the arrows to select the weight.
    (Image File) File of the image used for the fill. Click the down arrow to open and select a new image fill file. To select a local file that contains a compatible picture, select Browse for File. To select a picture from the Media Library, select Browse My Media. Browse and select the picture. To select a picture from the stock buttons, select Browse Stock Buttons. Browse and select the button. Existing buttons used within the title are listed.
    Outline 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, click Select and use the eye-dropper to click-to-select a new color from an existing color currently displayed on your desktop.
    Opacity Transparency of the object from 0 (invisible) to 100 (completely opaque). Use the arrows to select the appropriate setting.
    Outline Style Style of the outline. Click the down arrow to select a new style. Select from solid, dashed, or dotted style.
    Effects

    The effects of the button. Use the controls in the Effects group as follows:

    Shadow Shadowing effects of the button object. For shadowing, you can change the type, color, transparency, blur, angle and distance.
    Reflection Reflection effects of the button object.
    Text Style

    The style of the text associated with the button. Use the controls in the Text Style group 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. Use the drop-down list to select a new text color. Selecting a new text color overrides the text color defined by the current text style.

    (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:

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.

Knowledge Base | Training | Support
© Copyright eLearning Brothers 2021