Sunday, February 14, 2010

How to Create Custom Buttons in Captivate

by Jonathan Shoaf

Consistency is important when delivering eLearning. This is why most eLearning professionals develop a standard look and feel for all their courses. Learners need to be focused on learning the topic, not on finding out how to get to the next page or which button to click next. Buttons are a part of a standard look and feel and they need to be consistent through all of your courses.

Buttons are an important part of your organization's standard look and feel and you want to use your design in Captivate.

Create custom versions of your button for each Captivate button state and import them using the Button object. (Note: these directions are written for Captivate 4 but may work in previous versions as well)

You can reuse button graphics you have created in other programs in Captivate.

Helpful tip: If you don't have original graphic files you can use a screen capture program to take snapshots of the buttons in your existing eLearning and save them as graphics to be used in Captivate.

Before we get into the details, it is important to understand button states. Buttons states are used to give feedback to a learner and they are associated with the action they are about to take. Captivate has three button states you need to understand: up, over, and down.
  • up is the default state of the button. This is what the button looks like when it is not being used.
  • over is the state of the button when the learner is hovering over it with the mouse.
  • down is the state of the button when you click the mouse on it but before you release the mouse button.
1. Create a version of your button for each state

I've created three versions, one for each state, of a button I want to use in Captivate.

Captivate will expect the buttons to follow a standard naming convention. So pick out a button name, for example "myButton", and put a suffix on it according to the button state the graphic is designed for. For example:
  • myButton_up.png
  • myButton_over.png
  • myButton_down.png
Helpful tip: If you do not want a different button version for each state, just use the same default image for all states by copying it and renaming it.

2. Create a button in Captivate

Use the Button icon on the toolbar or use the menu Insert > Standard Objects... > Button.

As shown, make sure Image Button is selected for Button Type.

Now browse to the button you have created. It doesn't matter which button state you select (up, over, or down). As long as you followed the standard naming convention and all buttons are in the same folder, Captivate will automatically assign the appropriate graphic to the appropriate state.

Click Ok to accept the button and you will see your button in your project. Preview the project to see your custom button in action. Later, of course, you will want to go back and assign an action to it.


  1. Hi Jonathan,

    I stumbled on this in trying to sort out my own 'hover' over issues. This is amazing!! Thanks ever so much for posting this, tis much appreciated! :D

  2. Hi Jonathan,

    It's just me again. I have a wee problem.

    I have used your technique described above and it works a charm. I have a button that is essentially transparent as normal, glows when the mouse hovers over it as well highlighting a boxed area around it which is 30% fill.

    The only problem is that once the project starts to play, it doesn't generate the glow effect around the edge or the highlight box- instead I get a white 'block' when I hover over, which also blocks out the text on which the button sits over on the master slide.

    Is there a reason for this?

    Thanks ever so much, I would appreciate any help with this.

    My email is

  3. @Komal It sounds like the ***_over.png is not set to a transparent background. Also, check the version of Flash you are exporting to and try the latest version.

  4. Here is my issue. I important a set of custom buttons and they work great...however the client wants a small change in the button graphic. How do I update the design without deleting them all on all the slides and starting over?

  5. Zbauer, look in your Captivate course's library and update the button image there. The change will be reflected on all the screens.

  6. Johnathan,
    Great tip for Captivate users. We offer a library of eLearning buttons that work with Captivate and a larger library of media (including buttons) specifically designed for Captivate

  7. "Captivate will expect the buttons to follow a standard naming convention. So pick out a button name, for example "myButton", and put a suffix on it according to the button state the graphic is designed for."
    Thank-you, thank-you, thank-you. Even our graphic designer did not know this! - Heather

  8. How do you do this in Captivate 6, it works fine in 4 and 5 but I can't get it to work in 6?


Thank you for your comments.