Advanced Button Module Overview #
The Advanced Button Module allows you to add highly customizable buttons to your layout. In addition to standard button controls, this module includes advanced icon options, hover effects, animation presets, filters, and scroll interactions.
The module works seamlessly with the Divi Builder and follows the same Content, Design, and Advanced tab structure as native Divi modules.
Advanced Button Module Content Settings #
Button #
These settings control the button’s text, link, and icon behavior.
Available options include:
- Button Text
- Enable Button Link
- Button Link URL
- Button Link Target
(Same Window or New Window) - Enable Button Icon
- Button Icon
- Icon Color
- Icon Placement
- Icon Size
- Gap Between Text and Icon
- Enable Icon Effect
- Icon Effect Style
Admin Label #
Assign an admin label to help identify this module inside the Divi Builder.
Advanced Button Module Design Settings #
Button #
These options control the visual styling of the button.
Available options include:
- Button Alignment
- Button Background
- Font
- Font Weight
- Font Style
- Text Color
- Letter Spacing
- Line Height
- Rounded Corners
- Border Styles
- Border Width
- Border Color
- Border Style
- Box Shadow
Button Animation #
Use these settings to apply preset animations to the button.
Available options include:
- Enable Button Animation
- Animation Style:
- None
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Horizontal
- Wobble Vertical
Button Hover Effect #
These settings control visual effects applied on hover.
Available options include:
- Enable Hover Effect
- Hover Effect Color
- Hover Effect Style:
- None
- Sweep to Right
- Sweep to Left
- Sweep to Bottom
- Sweep to Top
- Radial Out
- Radial In
- Shutter In Horizontal
- Shutter Out Horizontal
- Shutter In Vertical
- Shutter Out Vertical
- Underline Progress
- Cursor Fill
Spacing #
Use these options to control spacing around button elements.
Available options include:
- Button Margin
- Button Padding
- Icon Margin
- Icon Padding
Filters #
Filters allow you to adjust the visual appearance of the button.
Available filter options include:
- Hue
- Saturation
- Brightness
- Contrast
- Opacity
- Blur
- Invert
- Sepia
The Blend Mode option controls how the button blends with elements beneath it.
By default, this is set to Normal.
Transform #
Use Transform options to scale, rotate, translate, or skew the button.
Each transform can be adjusted visually or by entering numeric values. Values can be linked together using the chain icon.
Animation #
Apply entrance animations to the module.
Available options include:
- Animation Style
- Animation Duration
- Animation Delay
- Animation Opacity
- Animation Speed Curve
- Repeat Animation
Advanced Button Module Advanced Settings #
CSS ID & Classes #
Assign custom CSS IDs or classes to the module for additional styling or scripting.
Custom CSS #
Apply custom CSS directly to specific elements of the button using the provided CSS fields.
Attributes #
Button Relationship (rel)
Define the relationship between the linking page and the destination page.
Conditions #
Control when the module is displayed based on specific conditions such as:
- User behavior
- Time and date
- Browser or operating system
- Purchase history
Multiple conditions can be combined.
Visibility #
Control where and when the module is visible.
Available options include:
- Hide on Phone, Tablet, or Desktop
- Overflow behavior (Visible, Hidden, Scroll, Auto)
Transitions #
Adjust how hover effects animate.
Available options include:
- Transition Duration
- Transition Delay
- Speed Curve
Position #
Control the placement of the module within the layout.
Available options include:
- Position Type (Default, Relative, Absolute, Fixed)
- Vertical and Horizontal Offset
- Offset Origin
- Z-Index
Scroll Effects #
Define how the button behaves when scrolling.
Available options include:
- Sticky Position (Top, Bottom, or Both)
- Transform Effects on Scroll
- Vertical Motion
- Motion Trigger Point
(Top, Middle, or Bottom)
Summary #
The Advanced Button Module provides enhanced control over button styling, animation, and interaction while maintaining full compatibility with Divi’s native module system. It is ideal for creating interactive and visually engaging call-to-action elements.
