# Button

## What is a Button Element?

A **button** is a clickable element that enables various actions when pressed.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FEAUBPgAO5SlqyOoiAMcP%2FScreenshot_1.png?alt=media&#x26;token=d860d8d5-f099-4245-bc18-993abfeeb53d" alt=""><figcaption></figcaption></figure>

## Edit General Button Element Settings

[Open](https://help.parta.io/editor/edit-elements) a button element settings window to start editing.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FMTRh6eVo1aitDPirdRLU%2FButton.01.png?alt=media&#x26;token=ad689baf-47a9-441d-a088-3867c276e5c2" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Type</td><td><p>Assigns the button action and shows additional button type settings.</p><p></p><p>Select a button type from a drop-down menu:</p><ul><li><strong>Actions in block</strong>: Allows learners to perform a specific action according to the section / block type;</li><li><strong>Course navigation</strong>: Allows learners to go to the specified course section;</li><li><strong>Link</strong>: Allows learners to go to the specified link;</li><li><strong>Download file</strong>: Allows learners to download the attached file;</li><li><strong>Continue</strong>: Allows learners to proceed the course only after the specified condition has been met;</li><li><strong>Branching</strong>: Allows the learner navigate through the course based on completing a Quiz or answering a question.</li></ul></td></tr><tr><td>2</td><td>Label</td><td>Sets the text displayed on the button.<br><br>Enter the button name.</td></tr></tbody></table>

The changes will be saved automatically.

## Edit Button Type Settings

Select a [button type](#type) to start editing.

### Action in block

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F9fpkZBBUBloA33IAAWgS%2FButton.07.png?alt=media&#x26;token=f7c06dc1-334e-4419-ae29-97fc981146a4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Actions</td><td>Sets the available action types for a button that depend on the section and block type.<br><br>Select an available action to perform from the drop-down menu.</td></tr></tbody></table>

### Course navigation

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FnSTsRujbGqNmyPbHKyPT%2FButton.03.png?alt=media&#x26;token=efe8f22f-6560-4004-8761-1eee2fcd5412" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Actions</td><td><p>Select where to direct the learners from the drop-down menu:</p><ul><li><strong>Next section</strong>: Directs the learner to the section following the current one.</li><li><strong>Previous section</strong>: Directs the learner to the section preceding the current one.</li><li><strong>Go to</strong>: Directs the learner to the specific section.</li></ul></td></tr><tr><td>2</td><td>Section</td><td><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Select the <strong>Go to</strong> option of the <strong>Actions</strong> to show the setting.</p></div><p>Select a section to which learners will be redirected.</p></td></tr><tr><td>3</td><td>Block</td><td><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Set the <strong>Section</strong> option to show the setting.</p></div><p>Select a block to which learners will be redirected.</p></td></tr></tbody></table>

### Link

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FUImQKk2bdneBabEJpDnl%2FButton.04.png?alt=media&#x26;token=d2b39a8d-95f3-458f-88c4-acb3cec68b15" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>URL</td><td>Assigns the button link to redirect the learner.<br><br>Enter a link address to open when clicking the button.</td></tr><tr><td>2</td><td>Open in same tab</td><td><p>Sets the behavior of the opened link.<br></p><p>Select an option:</p><ul><li>Click <strong>Yes</strong> to open the button link in the same browser tab;</li><li>Click <strong>No</strong> to open the button link in the new browser tab.</li></ul></td></tr></tbody></table>

### Download file

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F7FFVLLrkhksBjzJR44Pb%2FButton.05.png?alt=media&#x26;token=eaacce62-0816-4c24-8c96-7735bfa0fc6e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Upload</td><td>Click the <strong>Upload</strong> button to open the <a href="../../work-in-the-editor/manage-resources">Resources</a> window and select a file.</td></tr></tbody></table>

### Continue

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FOyF9r9malcUxXiWlRj5B%2FButton.06%20(1).png?alt=media&#x26;token=dda1fc2a-6590-4901-931b-ad63c085fba8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Condition</td><td><p>Select a condition to enable the Continue button from the drop-down menu:</p><ul><li><strong>No</strong>: Requires the users to click the Continue button to proceed the course;</li><li><strong>All blocks completed</strong>: Requires the users to interact with all blocks of the section;</li><li><strong>Block above passed</strong>: Requires the users to interact with the block placed above the block with the Continue button.</li></ul></td></tr><tr><td>2</td><td>Hide block</td><td><p>Select an option:</p><ul><li><strong>Yes</strong>: Hides the button or the block it's in when clicked;</li><li><strong>No</strong>: Shows the block and the inactive button when clicked.</li></ul></td></tr></tbody></table>

### Branching

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F9EA5frCFqPojX7QqpLv7%2FButton.07.png?alt=media&#x26;token=93309980-7475-4b1e-96c4-3d16f83d70ca" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
This option is available for:

* [**Quiz blocks**](https://help.parta.io/editor/edit-elements/set-quiz-elements/quiz-block-elements) of the [Content page](https://help.parta.io/project/set-sections/set-a-contents-page) sections;
* [**Results blocks**](https://help.parta.io/editor/edit-elements/set-quiz-elements/results-quiz-block-elements) of the [Quiz](https://help.parta.io/project/set-sections/set-a-quiz) sections.
  {% endhint %}

<table><thead><tr><th width="50">№</th><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Correct answer</td><td>Shows the button variation for the correct answer (<a href="../../../project/set-sections/set-a-contents-page">Content page</a> section) or the passed Quiz (<a href="../../../project/set-sections/set-a-quiz">Quiz</a> section).<br><br><strong>a.</strong> Select a <a href="#edit-general-button-element-settings">button type</a>.<br><strong>b.</strong> Configure the <a href="#edit-button-type-settings">settings</a> depending on selected type.</td></tr><tr><td>2</td><td>Incorrect answer</td><td>Shows the button variation for the wrong answer (<a href="../../../project/set-sections/set-a-contents-page">Content page</a> section) or the failed Quiz (<a href="../../../project/set-sections/set-a-quiz">Quiz</a> section).<br><br><strong>a.</strong> Select a <a href="#edit-general-button-element-settings">button type</a>.<br><strong>b.</strong> Configure the <a href="#edit-button-type-settings">settings</a> depending on selected type.</td></tr></tbody></table>

The changes will be saved automatically.

{% hint style="info" %}
[Explore different scenarios](https://help.parta.io/faq/how-to-use-branching-in-quizzes) for using branching in Quizzes depending on your needs.
{% endhint %}

## Brand a Button Element

[Set corporate branding for a button element.](https://help.parta.io/branding/create-branding/elements/button)

{% hint style="success" %}
Use the [pro mode](https://help.parta.io/no-code-editor) of the editor to set an element branding different from the corporate branding template.
{% endhint %}