Calm confidence — reassure, don't celebrate. On click, a translucent ripple ring expands from the press point, then the button smoothly morphs into a compact success state with a drawn checkmark. The ripple isn't decorative — it's temporal feedback that bridges the gap between 'I clicked' and 'it worked.' After 2 seconds, the button silently resets, ready for the next action.
Click to confirm payment
Secure checkout with Stripe
Build a Stripe-style ripple confirm button micro-interaction. Design philosophy — calm confidence: 1. Button: rounded-lg (8px), bg #635bff, white text, px-6 py-2.5, font-medium 15px. The Stripe violet conveys trust and sophistication simultaneously. 2. Hover: bg brightens to #7a73ff, subtle translateY(-1px) lift with shadow increase. Duration 200ms ease. The lift should feel like the button is reaching toward your cursor. 3. Click ripple: On mousedown, spawn a circle at the click coordinates (relative to button). The circle starts at 0 opacity 0.4, scales to 2.5× button width, and fades to 0 — all in 500ms with ease-out. Color: rgba(99, 91, 255, 0.25). Use overflow:hidden on the button to contain the ripple. 4. Success morph: After click, the button: a. Width shrinks smoothly from full to a compact pill (300ms ease-in-out) b. Background transitions from #635bff to #34d399 (emerald, 250ms) c. Text fades out (150ms), replaced by an SVG checkmark that draws in (stroke-dashoffset, 300ms) d. Subtle scale bounce: 1→0.95→1.02→1 (400ms spring) 5. Reset: After 2000ms in success state, reverse the morph back to the original state (400ms). 6. During the success state, the button is non-interactive (pointer-events: none). The result should make users feel their action was received and processed without any anxiety.