BUTTON
复制反馈按钮Copy Button with Feedback
点击后按钮原地变绿、图标换成对勾，1.5 秒后还原——复制成功不言自明。
效果预览
NOVA-2026-PRO
适合用在哪
代码块、优惠码、分享链接、API 文档。
容易踩的坑
- Clipboard API 在非 HTTPS 或权限被拒时会失败，却仍显示「已复制」误导用户。
- 反馈只用颜色从深变绿，色弱用户分辨不出，必须同时切换对勾图标。
- 1.5 秒内连续点击重复触发动画和 toast，叠出多条「已复制」提示。
设计提示词 · Prompt
复制反馈按钮（Copy Button）：点击后走"双态反馈"——立即把图标从复制换成对勾、背景从深色变绿色（过渡 200ms），同时弹出 toast"已复制"；1.5s 后无损还原。反馈必须发生在按钮本身，不要只依赖 toast——用户视线没离开按钮。配合被复制内容的容器：复制瞬间给容器一个轻微的背景闪烁（黄色高亮渐隐），让用户确认复制的是哪段内容。
Copy Button: on click, use "dual-state feedback" — immediately swap the icon from copy to a checkmark and the background from dark to green (200ms transition), while showing a toast "Copied"; restore cleanly after 1.5s. Feedback must happen on the button itself, don't rely only on the toast — the user's gaze hasn't left the button. Coordinate with the container of the copied content: at the moment of copying, give the container a subtle background flash (yellow highlight fading out) so the user can confirm which content was copied.
常见搭配
同一页面里经常和「复制反馈按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-copydemo"> <span>NOVA-2026-PRO</span> <button class="d-copybtn">⧉ 复制</button> <button class="d-copybtn is-done">✓ 已复制</button> </div>