Skip to content
Contact us

Create Custom Storyline Next/Back Buttons

 

Creating visually appealing and interactive navigation buttons in Articulate Storyline can help engage your learners. Whether you're looking for custom styles, animated hover effects, or dynamic button behavior, adding these enhancements often requires time-consuming CSS and JavaScript work. But not anymore! With our Storyline Button Styler tool, you can design beautiful, fully-customizable buttons in minutes—without writing a single line of code.

In this blog post, we’ll walk you through how this web app simplifies your button styling process, and how you can use it to enhance the learner experience in your eLearning courses.

What Is the Storyline Button Styler?

The Storyline Button Styler is a free web app designed to help eLearning developers and instructional designers create customized Next and Previous buttons for their Articulate Storyline courses.

With an easy-to-use interface, you can:

  • Choose from pre-built styles or create your own by tweaking color gradients, borders, and text.
  • Add hover animations to make buttons more interactive and engaging.
  • Enable special animations that activate when the Next button becomes clickable, adding a dynamic layer to your course navigation.

Once you’ve designed your perfect buttons, the app generates the CSS and JavaScript code you need. All you have to do is copy and paste it into your Storyline course.

How Does It Work?

The Storyline Button Styler offers a straightforward process:

  1. Choose Button Styles: Start by selecting a prebuilt style or customize the look of your buttons by adjusting colors, borders, and sizes.

  2. Add Animations: You can add hover animations like wipe, fade, or float. Additionally, you can set a special animation for when the "Next" button becomes active, giving learners a visual cue that they can move forward.

  3. Copy the Code: Once you're satisfied with your design, the tool automatically generates the necessary CSS and JavaScript code. All you have to do is paste it into the "Custom CSS" or "JavaScript" section of your Articulate Storyline course.

Why Use the Storyline Button Styler?

1. Save Time

Manually coding button styles and animations can take hours—especially if you’re not familiar with CSS or JavaScript. The Storyline Button Styler eliminates this hassle by generating all the code for you.

2. Create Interactive Buttons

Animations are a great way to engage learners and direct their attention. Adding hover effects and special animations for button clicks can enhance user experience, making your courses more dynamic and interactive.

3. Easy to Use

No coding experience is required. The tool’s interface is simple, intuitive, and easy to navigate. You don’t need to be a web developer to make your Storyline buttons look professional and polished.

How to Use the Storyline Button Styler

Using the Storyline Button Styler is simple. Here’s a quick guide to getting started:

  1. Create Your Style: Customize your button’s appearance, including colors, borders, and sizes.
  2. Optionally Add Animations: You can add hover effects and dynamic animations when the Next button becomes active.
  3. Copy the Code: Once you’re happy with your design, click the "Copy" button to grab the generated CSS and JavaScript code.
  4. Open the Slide Master in Storyline: In your Storyline project, go to the Slide Master view.
  5. Create a JS Trigger: Create a new JavaScript trigger on the appropriate slide or master slide.
  6. Paste the JS Code: Paste the copied code into the trigger and apply it to your course.

That’s it! You now have beautifully styled, interactive buttons in your course.

Example Use Case

Let’s say you’re building an eLearning course for corporate training. The course has several interactive scenarios, and you want the buttons to provide clear visual feedback.

  • You use the Storyline Button Styler to create Next and Previous buttons with a gradient background, rounded corners, and a smooth hover effect.
  • You also configure an animation that "bounces" the Next button when it becomes active, making it clear to the learner that they can move to the next part of the course.

Once you’ve designed the buttons, you copy the code, paste it into your Storyline project, and voilà! The buttons are ready for action.

Getting Started with the Storyline Button Styler

Ready to start creating your custom button styles? It’s as simple as visiting the tool’s website, designing your buttons, and copying the generated code into your Storyline course.

 

Whether you’re a seasoned developer or a new instructional designer, this tool is perfect for anyone looking to elevate their eLearning course design without the headache of manual coding.

Conclusion

The Storyline Button Styler is an essential tool for eLearning developers and instructional designers who want to enhance the visual appeal of their courses. With a few simple clicks, you can create responsive, beautifully styled buttons and animations that capture learners' attention and improve the overall user experience.

Give it a try today and take your Storyline courses to the next level!