Swipe Button Widget for Elementor

The Swipe Button widget adds a button with a swipe-style hover effect between its normal and hover states.

1. What It Does

Displays a button that swipes from its normal style to a separately styled hover state, instead of a plain color fade.

2. Why It Matters

A swipe transition feels more deliberate than a simple hover fade, useful for a primary button that should feel distinct from the rest of a page’s default button styling.

3. What You Get

A configurable button with text, an optional icon, a link, and separate normal and hover style controls that create the swipe transition.

4. Benefits

Skipped, already covered above: the value is the swipe hover transition described in Why It Matters and What You Get, restating it here would not add anything new.

5. Capabilities

• Button Text field
• URL field for the button’s link
• Select Icon field for an optional icon
• Icon Position dropdown, before or after the text
• Alignment control per responsive device
• Separate normal and hover style controls on the Style tab that create the swipe effect

6. How It Works

The button’s normal-state style and hover-state style are set independently on the Style tab, and the widget’s CSS transition swipes between the two on hover rather than cross-fading them.

7. How to Use It

1. Activate the Swipe Button widget from WDesignKit’s Ready Widgets.

1. Drag the widget onto the page and set the Button Text.

1. Add a URL, optionally add a Select Icon and set its Icon Position, then set Alignment for each device.
2. Style the normal and hover states separately on the Style tab to create the swipe effect.

8. Use Cases

• A primary call-to-action button that should feel more animated than a plain color hover
• A pricing page button styled to swipe to a contrasting color on hover

9. Limitations

• The swipe transition is hover-triggered, touch devices only see the normal state until tapped.
• Only one icon can be set per button, before or after the text, not both at once.

10. Troubleshooting

• Hover state looks identical to normal: confirm distinct colors were set for both states on the Style tab, they default close to each other.
• Icon is missing: check Select Icon has an icon chosen, then confirm Icon Position is set as expected.
• Button link does not work: confirm the URL field has a complete address including https://.