How can I create a Webflow button with a white stroke that fills left to right with color upon hover using timed actions or transition easing?
- Add a button with a transparent background, white border, and relative positioning.
- Insert a div inside the button with a background color (fill effect), absolute positioning, 0% initial width, and a lower z-index than text.
- Create a hover interaction in Webflow's Interactions panel to expand the div's width from 0% to 100% on hover in, and shrink it back on hover out, using an ease-out transition.
- Test and refine the animation for smoothness and responsiveness.
To create a Webflow button with a white stroke that fills left to right with color on hover, you can use interaction-based animations or CSS transitions with easing. Below is a step-by-step guide using Webflow's Interactions panel.
1. Create the Button Structure
- Add a Button: Drag a Button component onto your Webflow canvas.
- Style the Button:
- Set background color: Transparent.
- Set border: 2px solid white (adjust thickness or color as needed).
- Set padding: Adjust for desired button size.
- Set position: relative to allow for overlay elements.
2. Add the Fill Overlay
- Add a Div Block Inside the Button:
- Drag a Div Block inside the button.
- Set background color: Choose the fill color that will appear on hover.
- Position: Set to absolute (full width & height).
- Set initial width: 0% (this makes it hidden until interaction).
- Set z-index: Lower than the text so text remains visible.
- Give it a class: Name it something like
Fill Overlay.
3. Configure Hover Interaction
Go to Interactions Panel and create a new Mouse Hover animation:
Select the button, then go to Interactions (Lightning Bolt Icon).
Choose Element Trigger > Hover.
Click "Start an Animation" and select "New Timed Animation".
Hover In Animation:
Select the
Fill Overlaydiv.Click Size and set Width: 0% → 100% (ease in-out, 300ms duration).
Change animation timing to ease-out for a smoother effect.
Hover Out Animation:
Select the
Fill Overlaydiv.Click Size and set Width: 100% → 0% (ease in-out, 300ms duration).
4. Final Adjustments
- Test the interaction by hovering over the button.
- Refine animations by adjusting the easing and duration for smoother effects.
- Ensure responsiveness so the effect works on different screen sizes.
Summary
This method creates a button with a white stroke that fills left to right on hover using a div overlay and timed transitions. The animation is controlled via Webflow's Mouse Hover Interaction, with the overlay expanding and contracting smoothly.