Swap Button Widget
Use the Swap Button widget to create an interactive button that switches between two states on hover, adding a dynamic and engaging behavior to your buttons.
Content
Button
Text: Add the Button Text here.
Link: Add the Button Link here.
Alignment: Choose between Left, Center or Right Button Alignment for widescreen, desktop, tablet portrait and mobile portrait modes.
Icon
Normal: Select the Icon to be displayed in the normal state.
Active: Select the Icon to be displayed in the active state.
Hide On: Choose the resolutions below which the icon should be hidden.
Button ID: Set the Button ID here.
Please make sure the ID is unique and not used elsewhere on the page this form is displayed.
Animation
Animation: Select desired Animation form the dropdown.
Animation Duration: Set the Animation duration in milliseconds.
Reverse: Slide to YES to enable reverse option.
Style
Label
Typography: Set a Typography using settings from the dropdown.
Color: Set the label color for Normal and Hover modes.
Background Type: Choose between Classic and Gradient background types for both Normal and Hover modes and configure them accordingly.
Background Color: Choose the label background color.
Border Color: Set border color for Normal and Hover modes.
Border Radius: Set a border radius to the label.
Text Shadow: Select desired settings from the dropdown.
Padding: Set paddings for widescreen, desktop, tablet portrait and mobile portrait modes.
Border Type: Choose desired Border Type from the dropdown and set it.
Icon
Gap: Set a gap between button and icon for widescreen, desktop, tablet portrait and mobile portrait modes.
Size: Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes (for Normal and Active states).
Color: Set the icon color for Normal and Active modes.
Background Type: Choose between Classic and Gradient background types for both Normal and Active modes and configure them accordingly.
Background Color: Choose the icon background color.
Border Color: Set border color for Normal and Hover modes.
Border Radius: Set a border radius to the icon.
Rotate: Set the desired rotation for the icon for widescreen, desktop, tablet portrait and mobile portrait modes
Border Type: Choose desired Border Type from the dropdown and set it.
Advanced
Set the Advanced options that are applicable to this widget