The Ultimate Guide to Buttons in Storyline 2 Illustration

Default vs. Custom Buttons

In Articulate Storyline, there are two main types of buttons: default buttons and custom buttons. Default buttons can be found through the Insert tab by clicking on the Controls button.

Buttons Screenshot 1

The advantage of default buttons is that they come with five prebuilt states (Normal, Hover, Down, Visited, Disabled) and prompt you to add a trigger, making them quick and easy to use.

Buttons Screenshot 2Another cool thing about default buttons is that you have the option to insert an icon.

Buttons Screenshot 3Then you can either choose to use the icon alone, or add some text to label it.

Buttons Screenshot 4If you’re looking for a more customized look, you can create buttons out of almost any object in Storyline—such as a shape or an image—simply by adding your own states and a trigger.

Pro tip: If you’re creating a custom button using a shape, simply insert a default button and use the format painter to apply the default states to your object.

Buttons Screenshot 5

There—in a matter of seconds, I created states for my star. Check out this video to see this process step by step. Now, all I need to do is to create a trigger.

Buttons Screenshot 6

To learn more about the process, see this article called Adding Buttons.

Button States

So here we are going on and on about button states, but what are they even for? Button states are responsible for making your buttons come to life visually. One of the great things about Articulate Storyline is that it comes with a number of default states that work right from the get-go—no triggers necessary—so creating states is a breeze. Of course, if you’d like you can also create personalized states and add custom triggers. Let’s take a closer look at each of Storyline’s default states.

Normal: The normal state is the object’s neutral state. By default, it is also the initial state (meaning the state that is shown when the object first appears), but you can modify that to your liking. Most people don’t really pay much attention to this state, but did you know that you can actually add objects into the normal state? This technique is especially useful if you want to create a custom button that combines several objects, since states can’t be created on a group of objects. Just add the secondary objects to the normal state of the main object. That is precisely what I did in the Meet the Team download that I created a while back.

Buttons Screenshot 7

As you can see, the character and the text are actually located in the normal state, and not directly on the slide.

Hover: This state is how the object appears when it is hovered over. The purpose of the hover state is to signal to your learner that an object is clickable. As with all the states, you can customize the formatting of the hover state. The default hover state is a simple change of fill color, but you could also add a label, for example, like I did in the Management City Subway download:

Buttons Screenshot 8

Down: This state is how the object appears while it’s being clicked. It signifies to the learner that they are, in fact, clicking on the button. Much like the hover state, most of the time this state just changes the fill color of the object.

Visited: The visited state is what the object looks like after it has been clicked. This is especially useful if you have created a custom menu in your course, since it allows the learner to keep track of which parts of the course he or she has already seen. While you can just change the fill color for this state as well, another thing that you’ll see in a lot of e-learning courses is the addition of a check mark or another object. For example, in this Wellness example course the visited state is a heart:

Buttons Screenshot 9

Disabled: This state is what the object looks like when it’s visible but inactive. You can use this state if you’d like to require users to view content in a particular order, while still allowing them to see an overview of the items on the menu. Typically, I like to use the color gray or a lock icon, like in this example, to signify to the user that the button is currently inactive.

Buttons Screenshot 10

If there is no visual cue to signal to the learner that the button is inactive, they may think that the button isn’t working properly. If you’ve set a button as disabled by default, you must add a trigger to enable the button (i.e., reset its state to normal).

Selected: This state appears when the object is currently selected. It is commonly used in quizzes, for example, to indicate the answer that the learner has chosen. You can use this state in conjunction with a button set so that only one of the buttons in the set can be selected at a time.

Hidden: This state hides the object. If you have set the object to hidden by default, you will need to add a trigger in order to reveal that object.

For more details about working with states, check out this article.

Button Sets

Another cool feature that Storyline offers is button sets. As mentioned above, this allows you to define a group of buttons as a set so that only one of the buttons can be selected at a time, as in a multiple choice question.

Buttons Screenshot 11

To define a button set, all you have to do is select the buttons you want to include in the set, right-click, and choose the button set you’d like to add them to. Check out this video tutorial on adding button sets for a step-by-step walk-through.

Adding Triggers to Buttons

Once you’ve added and formatted your buttons, the final step is to add triggers. Luckily, Storyline makes this step a breeze. For default buttons, simply click the Add Trigger prompt and select the action that you’d like to see happen when the user clicks.

Buttons Screenshot 12

For custom buttons, simply click the New Trigger icon, and then follow the same process.

Buttons Screenshot 13

It’s as simple as that! For more information, see this video tutorial about working with triggers.

Creating your own buttons has never been so easy. Want to try it out for yourself but don’t have Articulate software? Download a free 30-day trial! And don’t forget to come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning.

Questions? Comments? Please share them below!

23 Comments
Marta Burda
Allison LaMotte