How can I create a wipe effect for a button color change on Webflow, similar to the "Our Story" button on a specific website?
TL;DR
- Nest an absolutely positioned overlay div inside the button with 0% width and desired hover color.
- Animate the overlay div's width from 0% to 100% on hover and reverse on hover out using Webflow interactions.
To recreate a wipe effect for a button color change in Webflow, similar to some animated buttons where a "color wipe" overlays from one side to another, follow these structured steps using Webflow’s native tools (no custom code required).
1. Structure the Button with Nested Elements
- Add a Button to your Webflow canvas.
- Nest a Div Block inside the button and position it absolute within the button. This div will serve as the color "wipe" layer.
- Name this Div something like "Button Wipe Overlay".
- Set the initial width to 0%, height to 100%, and background color to your desired hover color.
- Set position to absolute, with top: 0, left: 0, bottom: 0.
- Place the button text in a separate div above the overlay (z-index: 2), and make sure the overlay is set to z-index: 1.
2. Style the Base Button
- Set the base button background color (e.g., white or transparent).
- Set overflow: hidden so the overlay doesn't bleed outside the button.
3. Add the Hover Animation (Wipe Effect)
- Click the button and go to Interactions > Element Trigger > Mouse Hover.
- Choose "On Hover" and create a new animation:
- Animate the overlay div’s width from 0% to 100% (duration: ~0.3s).
- Choose "On Hover Out" and reverse the animation:
- Animate the overlay’s width from 100% back to 0%.
4. Optional: Change Text Color on Hover
- You can animate the text color either within the same interaction or using Webflow’s hover state.
- For better control, create it in the hover animation and fade the text color (or invert using a blend mode if needed).
5. Adjust Easing for Smooth Effect
- Use easing curves like “ease-in-out” for a smooth movement.
- Duration should be around 200–300ms for natural feel.
Summary
To create a wipe color hover effect for a button in Webflow, build the button with an absolutely positioned overlay div, animate its width on hover using Webflow interactions, and optionally adjust text color for better contrast. The “wipe” resembles a left-to-right color sweep that overlays the button for an elegant transition.
