Advanced Button Overview

DiviFlash Advanced Button allows you to create highly customizable buttons on your Divi website.

Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.

Let’s see the settings in brief and how to make better use of it —

Content Tab

This tab contains the main settings for configuring the button’s content and behavior.

Contents

• Text: Enter the primary text that appears on the button.
• Sub Text: Add a secondary line of text below the main button label.
• Use Icon: Enable this option to display an icon inside the button.
  • Icon: Choose an icon from the icon library.
• Image: Upload an image to display inside the button. (Available when Use Icon stays disabled.)

Settings

• Media Placement: Choose whether the image or icon appears on the left or right side of the button text.
• Sub Text Outside: Enable this option to display the sub text outside the button.

Hover

Use this section to add and customize animation effects that trigger when users hover over the button.

2D

• Select 2D Effect: Choose a 2D animation effect that activates when users hover over the button.
• 2D Transition Duration (Sec): Set how long the animation runs.
• 2D Transition  Delay (Sec): Set the delay before the animation starts after hover.

BG

Use this section to customize hover animation effects for the button background.

• Select Hover Background Effect: Choose a background hover animation.
• Select Hover Background Effect Direction: Choose the animation direction. (Available only for certain animation effects.)
• Add Hypen: Enable this option to display a hyphen after the background animation.
  • Hover Hypen Color: Choose the hyphen color.
• Add Bounce Effect: Enable this option to add a bounce effect to the animation.
• Hover Background Color: Choose the button background color on hover.
• BG Transition Duration (Sec): Set how long the background animation runs.
• BG Transition Delay (Sec): Set the delay before the background animation begins.
• BG Transition Timing Function: Choose how the animation progresses over time.

Note: Different hover background effects display different customization options.

Stroke

Use this section to customize hover animation effects for the button border.

• Select Hover Stroke Effect: Choose a border hover animation.
• Hover Border Color: Choose the border color on hover.
• Stroke Transition Duration (Sec): Set the animation duration.
• Stroke Transition Delay (Sec): Set the delay before the animation begins.
• Stroke Transition Timing Function: Choose how the animation progresses.

Media

Use this section to customize hover animation effects for the button media (icon or image).

• Select Hover Media Effect: Choose a hover animation for the media.
• Select Hover Effect Direction: Choose the animation direction. (Not available when Hover Show stays selected.)
• Media Transition Duration (Sec): Set the animation duration.
• Media Transition Delay (Sec): Set the delay before the animation begins.
• Media Transition Timing Function: Choose how the animation progresses.

Tooltip

Enable the tooltip option to display additional information when users hover over the button.

Tooltip Settings

This section appears after you enable the tooltip.

• Disable On Mobile: Disable tooltips on mobile devices.
• Arrow: Display an arrow indicator on the tooltip.
• Placement: Choose where the tooltip appears relative to the button.
• Animation: Select the tooltip reveal and closing animation.
• Hover Over Tooltip: Allow users to hover over the tooltip without closing it.
• Tooltip Hover Area: Adjust the invisible hover area that triggers the tooltip.
• Tooltip Content Delay: Set the delay before the tooltip appears.
• Tooltip Content Hide Delay: Set the delay before the tooltip disappears.

Note: The tooltip hover options appear only when you enable Hover Over Tooltip.

• Max Width: Set the maximum width of the tooltip.
• Tooltip Distance: Adjust the distance between the button and the tooltip. You can change both vertical and horizontal distance.

Link: Use this default Divi setting to add a link to the entire module.

Background: Add a background color, gradient, image, video, pattern, or mask to the module.

Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)

Design Tab

Use this tab to customize the visual appearance and layout of the Advanced Button.

Alignment: Adjust the horizontal alignment of the button and its container.

Text: Customize the typography settings for the main button text.

Sub Text: Customize the typography settings for the button sub text.

Media: Customize the appearance of the button media (icon or image), including color, size, border, and spacing options.

Tooltip: Customize the color and border settings of the button tooltip.

Tooltip Text: Customize the typography settings for the tooltip content.

Tooltip Heading Text: Customize the typography settings for the tooltip heading.

Sizing: Adjust the width, height, and alignment of the module.

Spacing: Add custom margin and padding to the module’s container.

Border: Customize the border style, width, and color. And style each border separately or apply the same style to all sides.

Box Shadow: Add shadow effects to the module.

Filters: Apply color filters to enhance the appearance.

Transform: Scale, rotate, move, or skew the module.

Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.

Advanced Tab

This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.

Need Help?

If you have any questions or need assistance, contact our support team: [email protected]