User Guide Cancel

Adding a button component to an Adobe Captivate project

Last updated on 26 Sep 2024

Captivate User Guide
Introduction to Captivate
1. What's New in Adobe Captivate
2. Adobe Captivate System Requirements
3. Adobe Captivate Updates
4. Download Adobe Captivate
5. Frequently Asked Questions
Add a slide
1. Slide navigator in Adobe Captivate
2. Add a conversation slide
3. Add characters to your Adobe Captivate project
4. Edit the background image on a slide
5. Add padding to content blocks and components
6. Create a long scroll project
Add text blocks
1. Add text to a project
Add media blocks
1. Add images to a project
2. Add videos to a project
3. Add quotes
4. Add SVGs to a project
Interactive components
1. Add a button
2. Add an input field
3. Add a radio button group
4. Add a dropdown
5. Add a checkbox
Widgets
1. Add a Card
2. Add Tabs
3. Add a Certificate
4. Add a Carousel
5. Add a Hotspot
6. Add Drag-and-Drop
7. Add a Timeline
8. Add Click to Reveal
Create quizzes
1. Add a Multiple-choice question
2. Add a True or false question
3. Add a Match the column question
4. Add a Short answer question
5. Add a Sequence question
6. Add question pools and random question slides
7. Import questions as CSV
Add audio to a project
1. Add audio
Interactions
1. Add interactions to a project
2. Create interactive video with overlay
3. Create a slide-level interaction
4. Create an object-level interaction
Animations
1. Add animations to a project
Accessibility
1. Make a project accessible
Customize the timeline
1. Timeline panel in Adobe Captivate
Customize TOC and Playbar
1. Table of Contents in Adobe Captivate
Edit project properties
1. Variables in Adobe Captivate
2. Preferences
3. Project dimensions
4. Themes
Create a simulation project
1. Simulation
Preview a project
1. Preview
Share a project for review
1. Share for review
Publish a project
1. Publish your project
Upgrade projects in Adobe Captivate
1. Upgrade projects to the latest version

Learn how to add and configure a button in an Adobe Captivate project.

Note:

Adobe Captivate introduces content blocks, such as text or an image block, which contain components like text, image, or button. Play this video to learn more about content blocks and components.

Buttons in the all-new Adobe Captivate are interactive elements that learners click to trigger various actions, behaviors, or navigation in a project. Buttons enhance user engagement, provide interactivity, and guide learners through the course material.

While designing a button, you can apply style and color to customize the appearance of a button and add an action to the button.

Add a button content block

Select Add interactive components > Button in the left toolbar to add a button content block.

Change the properties of a button content block

Adobe Captivate lets you add a button content block and change its appearance, color, and more.

In the Visual Properties panel, expand the Alignment and Spacing section.

The Content Width slider and Horizontal Padding are linked in the Alignment and Spacing section. Moving the slider from the left side changes the left padding value, and moving the slider from right changes the right padding value. The same change is replicated in the Content Width slider when you change the left or right Horizontal padding values.

If you want to add padding at the top or bottom of the selected content block, then enter the desired values for the Top and Bottom padding by changing the values in Vertical padding. Learn more on padding in content blocks in Adobe Captivate.

Select the Autofit height checkbox to change the height of the content block to fit the slide.

When you select the checkbox, the content block fits the slide's height. The content is centered, and padding gets added to the top and bottom. Select the checkbox when the content block's height is less than the slide's height, and you want the content to fit the slide.

When there are multiple content blocks, for example, two content blocks, where the combined height of the content blocks is less than the slide's height, if you enable the checkbox on the content blocks, the space is divided between the content blocks.
Select a design option. A design option presents pre-configured layouts with cleaner design elements to apply to the content block.

For more information, view Design options in Adobe Captivate.
Select the number of buttons you want in the content block in the Components section. Move the slider to add more buttons. If you add a button component and add more than one button, you can distribute the buttons horizontally in a uniform layout.

You can add up to 10 buttons within the button component. This will help create a custom Playbar when you disable the TOC and Playbar and add custom navigation or download buttons. Here is an example of multiple buttons:
In the Appearance section, you can change the color settings at the content block level. Add the background color, border, and apply a shadow to the border. Select a solid color, linear or radial gradient, or add an image as a background.
If you've selected Card, in the Card section, you can add a radius to one or four corners of the card, add a background color, add a border to the card, and apply a shadow to the card's border.

Modify card properties

Change the appearance of the button

Change the button's look and feel and determine how it behaves when you click or hover on it.

Select the button inside the content block.
In the Visual Properties panel in the right toolbar, move the Opacity slider to increase or decrease the transparency of the button.
Select any design option. A design option presents pre-configured layouts with cleaner design elements to apply to the button.

For more information, view Design options in Adobe Captivate.
In the States section, click Show to launch the States Flyout. Configure the in-built states of the button, Hover, Visited, Selected, and Disabled. If any state is disabled, right-click the state, and select Enable.

For more information, view States in Adobe Captivate.
In the Appearance section, select the Shape tab to add color to the background, add borders, and add shadow to the button. Select one of the caps (Butt, Round, or Projecting) when applying a border.
Similarly, change the font family, color, and other properties in the Text tab.

For more information, view Work with text in Adobe Captivate.
In the Icon tab, enable the Icon toggle.

You can change the button label and add an icon near the label. Select the folder icon and change the icon from the Assets or your computer.
Select the Solid color checkbox and add the icon's color. To add a border to the icon, select Border, and apply a border. Change the thicknesses of the border, and specify the border end caps (Butt, Round, or Projecting).
Select the icon size from, Small, Medium, or Large. Then select the position of the icon on the button. Select either:
- Alight Left
- Align Top
- Align Right
- Align Bottom
Select the icon's offset relative to the button. Select Default, Comfortable, or Compact. Offset adds space between the icon and the edge or border of the button.
In the Flip icon section, select Flip horizontally or Flip vertically, so that when a learner clicks the icon, the icon flips to the selected mode.
In the Reporting section, select the checkbox Report answer if you want the quiz to be included in an LMS. Each scorable unit of Captivate is automatically assigned a unique Interaction ID. This Interaction ID is what makes data tracking by the LMS possible.

Add interaction to the button

After you've designed the button, you can add interaction to it. You can add interaction from the Interactions panel in the right toolbar.

To add an action or interaction to the button, select the button, and select Interactions on the right panel. Then assign an action, for example, Open Url or file. On previewing the project, the URL opens when the learner clicks the button.

See Interactions to know more about creating interactions.

Add interactions to the button
To save your changes, click Done. The interaction appears in the Interactions panel.