The DiviFlash Advanced Button allows you to create highly customizable buttons on your Divi website. With this module, you can easily design buttons with unique styles, animations, and interactive elements.
Content Tab
Contents
Input the button text, sub text, and pick the button icon or upload an image.
Settings
- Media Placement: Choose if you want to place the image or icon on the right or left side of the button text.
- Sub Text Outside: Enable this option to place the sub text outside of the button.
Hover
This section lets you add and customize animation effects to the button that triggers on hover. You can add a hover animation effect to the button, its background, border, and media.
2D
Choose a 2D animation effect for the button. Also, set the animation’s duration and a starting delay.
BG
- Select Hover Background Effect: Choose an animation effect for the button background,
- Select Hover Background Effect Direction: Choose the direction of the animation effect. Only available for selective animation effects.
- Add Hypen: Enable this option to display a hyphen in the button after the background effect. You can also choose the color of the hyphen.
- Add Bounce Effect: Enable this option to add an additional bounce effect to the animation.
- Hover Background Color: Choose the background color of the button on hover.
- BG Transition Duration: Adjust the duration of the background animation effect.
- BG Transition Delay: Set a starting delay to the background animation effect.
- BG Transition Timing Function: Choose how the background animation will progress over time.
Stroke
- Select Hover Stroke Effect: Choose a border animation hover effect for the button.
- Hover Border Color: Choose the button border color on hover.
- Stroke Transition Duration: Adjust the duration of the border animation effect.
- Stroke Transition Delay: Set a starting delay to the border animation effect.
- Stroke Transition Timing Function: Choose how the border animation will progress over time.
Media
- Select Hover Media Effect: Choose an animation effect for the button media (image/icon).
- Select Hover Effect Direction: Choose the direction of the animation effect. Not available if you choose “Hover Show” as “Select Hover Media Effect.”
- Media Transition Duration: Adjust the duration of the media animation effect.
- Media Transition Delay: Set a starting delay to the media animation effect.
- Media Transition Timing Function: Choose how the media animation will progress over time.
Tooltip
Enable the tooltip for the button and add its content.
Tooltip Settings
If you decide to use a tooltip for your button, this additional section will appear.
- Arrow: Enable this option to use an arrow on the tooltip.
- Placement: Choose the placement of the tooltip.
- Animation: Select a reveal and closing animation for the tooltip.
- Hover Over Tooltip: Enabling this option will let you hover over the tooltip.
- Tooltip Hover Area: Modify the size of the invisible hover area that triggers the tooltip.
- Tooltip Content Delay: Set the time delay for the tooltip to show.
- Tooltip Content Hide Delay: Set the time delay for the tooltip to hide.
Note: The tooltip hover-related options are only available if you enable “Hover Over Tooltip.”
- Max Width: Set a maximum width limit for the tooltip.
- Tooltip Distance: Enable this option to customize the distance between the button and the tooltip. You get two separate options for adjusting the vertical and horizontal distance.
Link
Comes by default with Divi. No real use case.
Background
Add a background color, gradient, image, and more to the module.
Admin Label
Change the module name or label if required which will only be visible to you.
Design Tab
Alignment
Adjust the horizontal placement of the button and button container within their respective containers.
Text
Typography options for the button text.
Sub Text
Typography options for the button sub text.
Media
Color, size, border, and spacing options for the button media and its container.
Tooltip
Color and border options for the button tooltip.
Tooltip Text
Typography options for the tooltip content.
Tooltip Heading Text
Typography options for the tooltip content heading.
Sizing
Adjust the width, height, and alignment of the entire module.
Spacing
Add custom margin and padding to the entire module’s container.
Border
Border customization options for the whole module’s container. You have the option to style each border individually or all the borders together.
Box Shadow
Add a shadow effect to the entire module.
Filters
Add color filters to all the module items.
Transform
Make changes to the scale and position of the module.
Animation
Apply a reveal animation effect to the module and customize the delay, duration, repeat, etc. of the animation.
Advanced Tab
The default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
Do You Still Have Questions?
If you still have questions, then contact our support team at support@diviflash.com