UI Components
礼花触发按钮
点击时释放彩色粒子礼花的庆祝按钮。
作者:mcpskills
框架
reacttailwind
UI 库
button
难度advanced
英文提示词
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.
中文提示词
创建一个高级礼花触发按钮。按钮较大、rounded-full,带有深色渐变背景(靛蓝到紫罗兰)、白色文字 'Complete' 和柔和阴影。悬停时获得柔光效果。点击时按钮先轻微缩小再放大,同时从按钮中心爆发出彩色礼花粒子(使用 SVG 或小 div 粒子)。粒子应具有 varied 颜色(靛蓝、粉红、琥珀、青色、翠绿)、不同大小和带重力淡出效果的弧线轨迹。爆发后按钮文字变为 'Done' 并显示小勾选 SVG。使用平滑的 CSS/JS 动画,不使用 emoji,仅使用 SVG 图标。背景应为干净的浅色或深色表面,让礼花更突出。

Celebratory button that releases particle confetti on click.