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
- Wrap the button with a div and add a full-sized, absolutely positioned
Wipe BGdiv behind the text. - Set
Wipe BGto start offscreen (e.g., transform X = -100%), and animate it into view on hover using Webflow interactions. - Control layering with z-index and use smooth easing transitions for the wipe and optional text color change.
To create a wipe effect for a button color change in Webflow, you can use a combination of div wrappers, background animations, and hover interactions.
Here’s how to do it step-by-step:
1. Structure the Button Elements
- Place a Button inside a div block, or simply use a link block styled like a button.
- Inside the button element, add one additional div (e.g., name it
Wipe BG) that will act as the sweeping animation layer. - Set the
Wipe BGdiv to absolute positioning, full width and height, and place it behind the button text usingz-index.
2. Style the Wipe Div
- On the
Wipe BGdiv: - Set a solid background color (this will be the animated color on hover).
- Set its initial width to 0% or translate it fully out of view using Transform: X = -100%.
- Make sure overflow: hidden is not set on the parent button if done with transforms.
- Set the transition easing duration (e.g., 0.3s) for smooth animation.
3. Create a Hover Interaction
- Select the button (or link block) and go to Interactions > Hover.
- On Hover In:
- Target
Wipe BGand create a Move transform changing X from-100%to0%(fully covering). - Optionally, also fade the text color or change it to improve visibility.
- On Hover Out:
- Move
Wipe BGback from0%to-100%.
4. Adjust Layering and Text Visibility
- Ensure the button text is in its own layer above
Wipe BG. - Use z-index to control stacking: Text top (z-index: 2),
Wipe BGmiddle (z-index: 1), button base bottom (z-index: 0).
5. Add Smooth Transitions
- Apply easing options like
easeorease-in-outto the movement animation. - You may also animate the text color to invert or shift subtly for contrast.
Summary
To create a wipe color effect on hover, wrap your button in a div with an absolutely positioned color layer (Wipe BG) and animate its transform properties using Webflow’s hover interactions. This creates a clean, modern sweeping animation effect similar to those seen on high-end websites.