Dynamic buttons can be created to show various links in different posts (collection items) and are displayed as buttons.

You can easily create dynamic buttons using the Dynamic Content feature in SP Page Builder. 

Follow the steps below to dynamically display links as buttons from your collections.

Step 1: Add a Link Field to Your Collection

1. Navigate to Dynamic Content > Collections.

2. Select or create the collection where you want to add dynamic links.

3. Click on the “Custom Fields” and add a new Link field.

4. Give the field a meaningful name (e.g., "Demo Link").

5. Click Update Collection to save the changes.

Step 2: Populate the Link Field in Collection Items

1. Go to the Collection Item.

2. For each item, populate the newly added Link field with the appropriate URL.

3. Repeat this process for all items in the collection.

Step 3: Display Dynamic Buttons on Your Page

1. Navigate to SP Page Builder > Pages.

2. Open the page where you want to display the buttons.

3. Drag and drop the Dynamic Collection addon onto your layout. 

• Note: If you're using a Dynamic Content page, you can simply add a Dynamic Text addon without using the Dynamic Collection addon. In that case, it will display the source fields linked to that specific dynamic page.

4. Set the Collection Source to the one that includes your Link field. For example, we'll set the source to "Works", since the Link fields are included within the Works collection.

5. Inside the Dynamic Collection addon, drag and drop a Dynamic Text addon.

• Set a Limit for the number of buttons/links you want to show (e.g., 1 to display one button).

6. In the Dynamic Text settings:

• Set the Source Field to “Link.”
• Enter a Link Text that will appear on your button (e.g., View Demo Link).

7. Style and customize the text addon as desired to make it appear as a button.

Styling the Dynamic Text Addon to Look Like a Button

You can follow this example to style your Dynamic Text addon so it appears and behaves like a button.

1. Configure General Settings

• Select the Dynamic Text addon and go to the General tab.
• Ensure you've already selected a source field and added the Link Text. For example, set the link text as “View Demo”
• In the Typography section, configure the following:

• Font: Plus Jakarta Sans
• Font Size: 17
• Line Height: 1
• Letter Spacing: 0
• Font Weight: Semi Bold

Set the alignment to Middle.
Next, enable the Icon option:

• Icon Class: fas fa-arrow-right
• Position: Right
• Gap: 8px
• Size: 16px

2. Apply Styling

Go to the Style tab and scroll down to the Spacing section.

• Padding: 15px

In the Background section:

• Set the Background Color to #000000 (Black)

Enable the Use Border option:

• Width: 3px
• Style: Solid
• Color: #000000 (Black)

In the Miscellaneous section:

• Set the Border Radius to 200px to give your button edges a fully rounded appearance.

3. Set Custom Width

Navigate to the Advanced tab.

• Enable Custom Addon Width and set the width as needed. For example: 90.

Click Save and Close to apply your changes.

Final Look

After completing all the steps, your dynamic buttons will display the demo links you added to the collection items. The video below shows how each button automatically updates with the correct link. Watch the preview to confirm your setup and see the final result in action.