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

swap button 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. 

swap button widget animation

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.

swap button style icon

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

Related Articles