Outline to Fill Button

ButtonsLive Preview

An outlined button that fills with color on hover with a smooth sweep.

Customize Preview

Select options to update the live preview, or edit the prompt directly below.

Color

Fill Direction

Speed

Your Prompt

abcclick to edit

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.