How can I create a wipe effect for a button color change on Webflow, similar to the "Our Story" button on a specific website?

To create a wipe effect for a button color change in Webflow—similar to the "Our Story" button on some modern websites—you’ll need to use a combination of a hover interaction and an extra div as a color overlay inside the button.

1. Build the Button Structure

• Wrap your button text in a div block (e.g., call it Button Text).
• Surround this with a parent div (call it Button Wrapper).
• Inside Button Wrapper, add a new div block (call it Wipe Overlay) which will serve as the animated color overlay.

2. Style the Elements

• Set Button Wrapper to position: relative and overflow: hidden.
• Style Wipe Overlay:
• Set position: absolute, top: 0, left: -100%.
• Set height and width to 100%.
• Give it the desired background color for the wipe effect.
• Set z-index below or above text as needed.
• Style the Button Text to be centered and stack above the overlay if necessary.

3. Add the Hover Interaction

• Select the Button Wrapper, go to the Interactions panel, and choose Hover.
• Add a new animation for Hover In:
• Target the Wipe Overlay and animate the left position from -100% to 0% over 0.3–0.5 seconds.
• Add a Hover Out animation:
• Animate left position back from 0% to -100%.

4. Optional: Change Button Text Color

• To enhance the effect, add another animation within the same interaction:
• On hover in, change the text color once wipe hits (trigger at 50% of animation).
• On hover out, revert the text color accordingly.

5. Preview and Fine-Tune

• Test in Webflow’s preview mode.
• Adjust timing, easing, or color until the wipe looks smooth and matches your desired style.

Summary

To achieve a wipe effect on button hover in Webflow, use a div overlay with a hover interaction that animates from left to right, mimicking a color swipe. Carefully layer the text and overlay using z-index and positions, and animate the overlay's position to create the wiping appearance.