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?

You want to create a button in Webflow with a white outline that fills with color from left to right on hover using interactions or transition easing. Here’s how to set that up using Webflow interactions and native styling:

1. Create the Button Structure

• Drag a Button or Div Block into your layout.
• If using a Div Block, add a Text Block inside it with your button label.
• Style the container:
• Set Display to inline-block or block as needed.
• Add Padding and set Position to relative.
• Add a 1px solid white Border (stroke).
• Set Text color to white.
• Remove background color (set to transparent).
• Set Overflow to hidden.

2. Add the Fill Layer

• Add a new Div Block inside the button (before or after the text element).
• Name it something like Fill Layer.
• Set styles:
• Position: absolute, top 0, left 0
• Height and Width: 100% height and 0% width
• Background color: choose your desired intended fill color
• Set Z-index: less than text, or use auto behind text
• Transition: set on Width to .3s ease (or your preferred duration)
• Optional: Use mix-blend-mode or opacity for smoother blending if needed

3. Style the Text

• Adjust Z-index to be above the fill (e.g., 2)
• Optionally, set Position to relative
• Ensure the color remains white unless you want it to change on hover too

4. Create the Hover Interaction

• Select the Button Container.
• Go to the Interactions panel, and under Element Trigger, choose Mouse Hover.
• For On Hover, add a Timed Animation:
• Use Start an Animation > New Animation (e.g., “Button Hover In”)
• Affect the Fill Div: add an animation step to change Width from 0% to 100%
• Set Easing (e.g., ease, ease-in-out, or custom) and Duration (e.g., 0.3s)
• For On Hover Out, create a reverse animation:
• Animate the Width back from 100% to 0%

5. Optional Enhancements

• Text color change on hover: Add opacity to the text or change color within the animation.
• Custom easing curves: Use custom easing in the interactions timeline for smoother transitions.
• Rounded corners: Add border-radius for a pill-shaped or rounded button effect.

Summary

To create a Webflow button with a white stroke and a left-to-right filling animation on hover, use a nested div for the fill background, control its width via hover interactions, and structure elements with relative and absolute positioning. The animation is driven by changing the fill layer’s width with timed actions and easing for a smooth visual effect.