代码复制按钮

一个轻量的代码复制按钮，适合放在组件卡片或代码块右上角。

适用技术

HTML/CSS/JavaScript

使用场景

展示代码片段时，让用户一键复制当前版本。

响应式

按钮文字较短，移动端保持最小 44px 点击高度。

无障碍

使用 button 元素，并在复制后更新可见状态文字。

组件预览

原生 HTML

<button class="copy-button" type="button" data-copy="要复制的内容">复制代码</button>

CSS

.copy-button { border: 1px solid #7f1d1d; background: #fff; color: #7f1d1d; padding: 10px 14px; border-radius: 6px; font-weight: 600; }

JavaScript

document.querySelectorAll("[data-copy]").forEach((button) => { button.addEventListener("click", async () => { await navigator.clipboard.writeText(button.dataset.copy || ""); button.textContent = "已复制"; }); });