View Categories

Advanced Button Overview

4 min read

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

              Submit a Comment

              Your email address will not be published. Required fields are marked *