UI Components
Confetti Trigger Button
A celebratory button that releases colorful particle confetti on click.
by mcpskills
Framework
reacttailwind
UI Library
button
Difficultyadvanced
English Prompt
Create a premium confetti trigger button. The button is large, rounded-full, with a dark gradient background (indigo to violet), white text 'Complete', and a subtle shadow. On hover, it gains a soft glow. On click, it briefly scales down then up, and colorful confetti particles burst from the button center using SVG or small div particles. Particles should have varied colors (indigo, pink, amber, cyan, emerald), varied sizes, and arc trajectories with gravity fade-out. After the burst, the button text changes to 'Done' with a small checkmark SVG. Use smooth CSS/JS animations, no emojis, only SVG icons. The background should be a clean light or dark surface that makes the confetti pop.
Chinese Prompt
创建一个高级礼花触发按钮。按钮较大、rounded-full,带有深色渐变背景(靛蓝到紫罗兰)、白色文字 'Complete' 和柔和阴影。悬停时获得柔光效果。点击时按钮先轻微缩小再放大,同时从按钮中心爆发出彩色礼花粒子(使用 SVG 或小 div 粒子)。粒子应具有 varied 颜色(靛蓝、粉红、琥珀、青色、翠绿)、不同大小和带重力淡出效果的弧线轨迹。爆发后按钮文字变为 'Done' 并显示小勾选 SVG。使用平滑的 CSS/JS 动画,不使用 emoji,仅使用 SVG 图标。背景应为干净的浅色或深色表面,让礼花更突出。
