how to create a toggle button effect in Articulate Storyline

Jun 24, 2013


After going through the tutorial present at the link give below, I would to ask a few questions:

  1. Where do you find the two buttons used in the video?
  2. How do we attach/link the buttons with a running video?
  3. can you explain me in detail, how to create the demonstrated effect right from the beginning?

Since, I am a beginner I would really appreciate if I get explanation or step-wise guidance on creating the effect.



10 Replies
Bruce Graham

Hi Chetna.

The buttons are created by "Insert > Button" and making the one with round corners into a circle. Alternatively you can just design your own using grouped shapes in Storyline.

All of the "links" are done using Triggers - as shown in the video.

You probably just need to understand Triggers better - see here for Tutorial.

Hope that helps.


Rebecca Fleisch Cordeiro


I just created a tutorial here that explains how to create the play/pause button using the selected state as Phil has suggested. Tx, Phil!

Oh, and here's the file to practice with. There are 2 slides: the first one is "done", the second one needs to be done - as demoed in the tutorial.

Rebecca Fleisch Cordeiro

Hi All,

Can anyone comment on this play/pause toggle variable or look at the story I attached (6/24/13) and whether there is a bug in Storyline or whether I missed a step here?

Someone commented the following on the Screenr page:


Couldn't help but notice that, despite assigning a pause icon to the Selected state on the button, when Previewed, the button retained it's Play icon, even though the text toggled to 'Pause'.

A bug?


I hadn't notice that, but the observation is correct. The text DOES change, as does color and probably a number of other things, but the icon doesn't.

I did work around it (steps below), but I don't think I/we should have to do this.


  • Create a matching button (place it offstage if you want to keep it)
  • Insert the pause icon on it and type the Pause text
  • Remove all the states from it
  • If you copied and pasted from the original button (as I did to save time for size, color, etc,.) be sure to remove the triggers
  • Copy the new "buttonless" button
  • Edit the states of the original button and place this one on top of the original one in the paused state, setting the position to 0,0

So, there's the workaround, but is this a bug? Shouldn't the icon change, just as other things do with the edited pause state?


Rebecca Fleisch Cordeiro


Tx for responding so quickly. I didn't realize I needed to do that (delete visited state). It makes sense now...sort of "DUH".

I'll go ahead and make that note on the Screenr page.

Tx, as always Phil, for sharing your immense amount of knowledge with all of us. I'd like to see your brain on an FMRI when you're thinking Storyline I bet it would light up a room!

This discussion is closed. You can start a new discussion or contact Articulate Support.