Outline to Fill Button
An outlined button that fills with color on hover with a smooth sweep.
Adjust the preview
Every choice updates the preview and the wording below.
Color
Fill Direction
Speed
Your prompt
Highlighted values follow your choices — click one to write your own.
Create a button that starts as a emerald green outlined/bordered button and fills with solid color on hover. The fill uses a left-to-right sweep transition over 0.3 seconds. The text color inverts from emerald green to white on hover. Use CSS transform scaleX on a pseudo-element for the sweep effect.
Paste it into Claude, Cursor, or v0 along with the context for your project.