# コピー完了フィードバックボタンのCSS実装

> コードスニペット横の「コピー」ボタン。押すと2秒間「コピーしました」に変わり、色でも完了を伝えるマイクロインタラクションです。

- カテゴリ: ボタン・操作
- URL: https://www.css-dictionary.com/recipes/copy-feedback-button/

## HTML

```html
<div class="copy-row">
  <code>npm run build</code>
  <button type="button" id="copy-btn" class="copy-btn">コピー</button>
</div>
```

## CSS

```css
.copy-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
}

.copy-btn {
  padding: 4px 12px;
  border: 1px solid #cbbfa5;
  border-radius: 6px;
  background: transparent;
  color: #5c5445;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.copy-btn:hover {
  border-color: #b0413e;
  color: #b0413e;
}

.copy-btn:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: 2px;
}

.copy-btn.is-copied {
  background-color: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}
```

## JavaScript

```js
const copyBtn = document.getElementById('copy-btn');
copyBtn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('npm run build');
  } catch {
    // クリップボードが使えない環境（このプレビュー内など）でも表示は切り替える
  }
  copyBtn.textContent = 'コピーしました';
  copyBtn.classList.add('is-copied');
  setTimeout(() => {
    copyBtn.textContent = 'コピー';
    copyBtn.classList.remove('is-copied');
  }, 2000);
});
```

## 仕組みの解説

navigator.clipboard.writeText でコピーし、成功・失敗にかかわらずボタンの文言と色を2秒間切り替えて結果を伝えます。色だけでなく文言も変えるのは、色覚特性のあるユーザーにも伝わるようにするためです。transition を background-color 等に限定しているので、切り替えがなめらかに見えます。

## 実装のポイント

このプレビューのサンドボックス内ではクリップボードAPIがブロックされるため表示切り替えのみ動きます。実サイトではHTTPS（またはlocalhost）が必要です。

## AIに依頼するときの文例

コードブロック横に置くコピーボタンを作ってください。navigator.clipboardでコピーし、2秒間「コピーしました」と文言と背景色が変わるフィードバック付き。クリップボードが使えない環境でも落ちないようにtry-catchしてください。

## 使っているプロパティ

- [transition](https://www.css-dictionary.com/property/transition.md)
- [background-color](https://www.css-dictionary.com/property/background-color.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [color](https://www.css-dictionary.com/property/color.md)