Button
Use Button to add a styled call to action that links to content, runs custom click behavior, or opens lightbox content.
Usage​
Use Button to output a single call-to-action element with optional text and icon styling. Depending on Click Action, the module renders a standard link, a clickable button that runs custom JavaScript, or a lightbox trigger that opens inline HTML content or a video overlay.
Use Button for primary page calls to action, download links, outbound links, popup videos, and small interactive triggers that need module-level styling control. It fits layouts where one button needs precise spacing, width, colors, gradients, and border styling without switching to a grouped button module.
Module Settings​
The Button module settings control button content, click behavior, lightbox content, and visual styling.
General Tab​
The General tab sets the button label, icon behavior, and click action.
Text Default: Click Here; Supports: Field Connections
Sets the text displayed inside the button.
Icon Supports: Field Connections
Adds an optional icon to the button.
Icon Position
Icon Position (Icon Only) Default: Before Text
Places the icon before or after the button text when an icon is selected.
Icon Visibility
Icon Visibility (Icon Only) Default: Always Visible
Keeps the icon visible or fades it in on hover when an icon is selected.
Click Action Default: Link
Selects whether the button acts as a link, runs custom button code, opens lightbox content, or copies text to the clipboard.
Link settings
Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
Button
Button Code (Button Only)
JavaScript executed when the button is clicked. The code runs on the front end, not inside the builder.
// Example: show an alert on click
alert('Button clicked');
WordPress loads jQuery in no-conflict mode. Use jQuery instead of $ in this field to avoid JavaScript errors.
Lightbox
Lightbox Content
This section is available when Click Action is set to Lightbox and controls what opens in the lightbox overlay.
Lightbox Content settings
Content Type Default: HTML
Selects whether the lightbox displays inline HTML or a video.
HTML Content
HTML Content (HTML Only) Supports: Field Connections
Adds custom HTML rendered inside the lightbox when Content Type is set to HTML.
Video Link
Video Link (Video Only) Supports: Field Connections
Sets the video URL opened in the lightbox when Content Type is set to Video.
Copy Text
Text to Copy (Copy Text Only)
Sets the text copied to the visitor's clipboard when the button is clicked. Available when Click Action is set to Copy Text.
Copy Success Message (Copy Text Only) Default: Copied!
Sets the confirmation message shown after the text is copied. Available when Click Action is set to Copy Text.
Style Tab​
The Style tab controls the button width, spacing, colors, gradients, and border styling.
Width Default: Auto
Sets whether the button sizes to its content, fills the available width, or uses a custom width.
Align
Align (Auto and Custom Only) Default: Left; Supports: Responsive
Sets the horizontal alignment of the button wrapper when Width is set to Auto or Custom.
Custom Width
Custom Width (Custom Only) Default: 200; Supports: Responsive
Sets a fixed button width in px, vw, or % when Width is set to Custom.
Padding Supports: Responsive, Link Values
Sets the inner spacing around the button text and icon.
Text
The Text section controls button label colors and typography.
Text Settings
Text Color Supports: Responsive, Field Connections
Sets the text color for the button label and icon.
Text Hover Color Supports: Responsive, Field Connections
Sets the text color for the button label and icon on hover.
Typography Supports: Responsive
Controls the typography of the button label.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Icon
This section is available when the selected icon is a Font Awesome DuoTone icon.
DuoTone Icon Colors
DuoTone Icon Primary Color Supports: Field Connections
Sets the primary color of the selected DuoTone icon.
DuoTone Icon Secondary Color Supports: Field Connections
Sets the secondary color of the selected DuoTone icon.
Background
The Background section controls the button fill style, color, gradients, and hover animation.
Background settings
Background Style Default: Flat
Selects Flat, Auto Gradient, or Advanced Gradient for the button background.
Background Color
Background Color (Flat and Auto Gradient Only) Supports: Responsive, Field Connections
Sets the button background color when Background Style is Flat or Auto Gradient. Auto Gradient uses this color to build its base gradient and falls back to #a3a3a3 when no color is set.
Background Hover Color
Background Hover Color (Flat and Auto Gradient Only) Supports: Responsive, Field Connections
Sets the hover background color when Background Style is Flat or Auto Gradient. When left empty, the hover state falls back to Background Color.
Background Animation
Background Animation (Flat Only) Default: Disabled; Supports: Responsive
Enables or disables the button background transition when Background Style is set to Flat.
Background Gradient
Background Gradient (Advanced Gradient Only)
Configures the default gradient colors, type, angle, and position when Background Style is set to Advanced Gradient.
Background Hover Gradient
Background Hover Gradient (Advanced Gradient Only)
Configures the hover gradient colors, type, angle, and position when Background Style is set to Advanced Gradient.
Border settings
Border settings control border style, width, color, radius, and related responsive border controls where available.
Border Hover Color Supports: Responsive, Field Connections
Sets the border color used on hover and focus.
Advanced tab​
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.
See the Advanced tab section for more information.