Storyline 1: Adding Buttons

Article Last Updated

This article applies to:

Storyline includes a variety of ready-made button styles to help you quickly create inviting, professional-looking interactions in your courses. You can choose from standard push-buttons (both rectangular and oval), four styles of check boxes, and four styles of radio buttons:

How to Insert a Button

To insert a button onto a Storyline slide, follow these steps:

  1. Go to a slide where you want to add a button.
  2. Select the Insert tab.
  3. Click Button and choose one of the styles available. You cursor will turn into a crosshair.
  4. Click and drag on your slide to insert the button.

Once your button is on your slide, you can move, resize, or format it. You can add as many buttons to your slide as you like.

Adding Text to Your Buttons

To add text to a button, there’s no need to create a separate text box. Just select the button you’ve inserted, and start typing. The text becomes part of the button object itself.

You can modify the text attributes on your button in the same way that you would normally customize a text box. For example:

  • To change the font and paragraph settings, select the button and use the options on the Home tab. See this tutorial if you need help.
  • To change the text’s alignment, autofit options, and margin settings, right-click the button, choose  Format Shape, and select the Text Box tab. See this tutorial if you need help.

Making Buttons Work

Once you insert one or more buttons on your slide, you can use Storyline’s interactivity tools to customize how your buttons work. Here are some of the things you can do:

  • Add a trigger: Triggers allow you to create actions based on how your learners interact with the button. For example, let’s say you’ve inserted a push-button to your slide, and you want to reveal a slide layer when learners click the button. Or maybe you want the button to take learners to a different slide, or open a URL, or display a lightbox. Or maybe you want to play a sound effect whenever learners hover over a button. These and many more actions can be created easily with triggers.To apply triggers to your Storyline buttons, check out this tutorial for guidance.
  • Turn your buttons into a freeform interaction: Another way to create interactivity is to leverage your buttons as choices in an interaction or a question. You can do this by using Storyline’s versatile Convert to Freeform option, which allows you to transform any slide into an interaction, such as a multiple-choice or multiple-response activity. If you like, you can even score the question and display customized feedback once the learner uses a button to select a choice. To find out more, check out the tutorial on Converting an Existing Slide to a Freeform Interaction.
  • Turn your buttons into a button set: If you’ve added multiple buttons to a slide and you want learners to be able to select just one of them at a time, you can turn them into a button set. Button sets allow you to make any objects behave like radio buttons — if a learner selects one button from the set, any other buttons from that set automatically become unselected. You can even have multiple button sets on a single slide, if you’d like learners to select just one option from each group of buttons. For more details, see the tutorial on Adding Button Sets.

Formatting Your Buttons

It’s easy to customize the appearance of buttons with Storyline’s formatting options. Just select a button on your slide, then click the Format tab on the ribbon. The specific options you see will depend on the button style you’re using. You’ll be able to do things like apply ready-made styles; change the fill and border color, and apply other effects.

The colors available in the on the Format tab are controlled by your project's design theme. You can learn how to customize the colors in your design them here.

Adding an Icon to a Button

When you insert a push-button on your slide, you can add an icon to it if you like. Storyline provides a library of nearly 200 different icons to choose from. Here’s how to apply them:

  1. Select a push-button you’ve inserted on your slide.
  2. Click the Format tab.
  3. Select an icon from the Button Icons section of the ribbon. (Click the arrow in the lower-right corner of the panel to expand the list.)
  4. If you like, use the Align Icon to change the placement of the icon on the button:
    • The Align Left and Align Right options determine whether the icon appears to the left or to the right of any text you add to the button.
    • The Center with Text option causes the icon and button text to be aligned together as if they were grouped. Any alignment choices you apply to the button text (via the Home tab) will be applied to the icon and text together.
    • The Ignore text option aligns the icon to the left or right edge of the button (depending on whether you chose Align Left or Align Right above), without regard for any additional alignment settings you apply to the button text.
  5. To change the color of the icon, use the Icon Color selector to choose the color you want. The choices available are controlled by your project’s theme colors. For even more flexibility, you can choose More Icon Colors and choose the specific color value.

About the icon size: When you add an icon to a button, the icon size depends on the font size you’ve applied to the button. To change the size, select the button and click the Home tab, and use the font size tools:

If you change your mind about using an icon, just select the button, click the Format tab, and choose Remove Icon.

Changing the Default Button Characteristics

If you customize the look of a button, and you want those attributes to apply to future buttons you create within the same Storyline project, you can set your customized button as the default. Just right-click the button and choose the Set As Default option.

Once you do this, any new buttons you create within the same story will inherit the default button’s attributes.

About the Built-In Button States

When you insert a button on your slide, it’ll come with some pre-built states, which control the look of the button when learners hover over, click on, or otherwise interact with it. The pre-built states that Storyline applies will depend on the type of button you insert.

  • All buttons include a normalhoverdown, and disabled state.
  • Push-buttons also include a visited state (which determines what users see after clicking on the button at least once).
  • Check boxes and radio buttons also include a selected state (which determines what users see when they’ve marked a check box, clicked a radio button, or clicked on a button that’s part of a button set).

You can, of course, modify any of the pre-built states or create additional states if you like. For help with that, check out the tutorial on Adding and Editing States.