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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Stripe-style ripple confirm button micro-interaction.
Design philosophy — calm confidence:
1. Button: rounded-lg (8px), bg #4F46E5, white text, px-6 py-2.5, font-medium 15px. The Stripe violet conveys trust and sophistication simultaneously.
2. Hover: bg brightens to #4F46E5E6, 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: #4F46E540. 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 #4F46E5 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.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
Click to confirm payment
Secure checkout with Stripe