Pill to Circle Btn

Animated Pill to Circle Button

Pill to Circle Button is a hover-animated button that smoothly transforms from a rounded pill shape into a perfect circle.

The animation expands the button evenly while keeping the label centered, creating a clear and engaging visual transition. It is designed as a visual interaction component and does not include additional functionality.

This button works well for call-to-action sections, landing pages, portfolios, and product highlights.

Interaction

• Default state: Rounded pill shape

• Hover state: Expands into a circle

• Centered text remains aligned during transition

• Smooth shape and size animation