Want to add interactivity to your Storyline 360 courses? Buttons let you guide navigation, reveal content, capture learner input, and more. You can customize their appearance and define what happens when learners select them using states and triggers. Keep reading to learn how. 

• Create and Customize Buttons
• Add Button Interactivity
• Make Buttons Accessible

Create and Customize Buttons

To add a button, go to the Insert tab and click Button. Then, choose a style and draw it on your slide or layer. To add button text, select the button and start typing. You can also:

• Format text in the Home tab. Learn more.
• Adjust alignment, margins, and autofit by right-clicking and choosing Format Shape, then selecting the Text Box tab. Learn more.

Giving buttons meaningful names makes them easier to identify in triggers and interactions. To rename a button, right-click it and select Rename. You can also double-click it in the timeline and enter a new name.

To format a button to fit your course design, select it and go to the Format tab. You can change styles, colors, effects, and add icons. Colors come from your theme. You can right-click a customized button and choose Set as Default Button to apply the same style to all new buttons.

To delete a button, select it and press Delete on your keyboard.

Add Button Interactivity

Use states and triggers to define how buttons respond to learner interaction.

Buttons include built-in states that change their appearance when learners interact with them. By default, these include Normal, Hover, Down, Visited, and Disabled. You can edit these or create your own. Learn more.

You can use triggers to determine what happens when learners select a button. For example, you can show a layer, jump to another slide, play media, adjust a variable, and more. Learn more.

You can also:

• Convert slides to freeform interactions and use buttons as answer choices with optional scoring and feedback. 
• Create button sets that allow only one selection at a time. When buttons are grouped, selecting one automatically deselects the others. You can include multiple button sets on the same slide.

Make Buttons Accessible

Accessible buttons help all learners navigate and interact more easily with your training. Follow these tips to boost button accessibility:

• Provide clear instructions and feedback. Explain what each button does and give feedback when it’s selected, especially for actions like submitting responses or moving between slides (3.3.2 Labels or Instructions).
• Use descriptive labels. Write button text that explains what happens when learners select it, such as “Submit answer” or “Open resources.” Avoid vague text like “Click here” (2.4.4 Link Purpose).
• Provide accessible names for icon-only buttons. If a button uses only an icon, add alt text that describes its action. Hide decorative icons from assistive technologies (1.1.1 Non-text Content).
• Use on-screen text instead of hover alone. Present important information on the slide rather than relying only on hover states, which aren’t available to all learners (1.4.13 Content on Hover or Focus).
• Set a logical focus order. Arrange buttons so keyboard navigation follows a meaningful and usable sequence for keyboard and screen reader users (2.1.1 Keyboard, 2.4.3 Focus Order).
• Test buttons with a keyboard. Make sure learners can reach and activate each button using Tab, Enter, or Space (2.1.1 Keyboard). 
• Keep focus states visible. Use the default high-contrast focus indicator so learners can see which button is selected. If you customize it, make sure it stays easy to see (2.4.7 Focus Visible).
• Use sufficient contrast. Choose text and background colors that are easy to read in all button states. Aim for at least a 4.5:1 contrast ratio for text and 3:1 for larger text or button elements (1.4.3 Contrast [Minimum]).
• Don’t rely on color to show meaning. Add text, icons, or other visual cues to communicate button states so learners have context beyond color (1.4.1 Use of Color).
• Make buttons easy to select. Create buttons that are large enough to select comfortably. Aim for a minimum target size of 24 by 24 pixels to support different input methods (2.5.8 Target Size [Minimum]).