<div class="wrapper">
  <p id="text">この文章がコピーされます。</p>
  <button id="button">COPY!</button>
</div>
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  background: #dccb95;
  color: #29376a;
  margin: 50px;
}

.wrapper {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

#button {
  font-family: "Josefin Sans", sans-serif;
  letter-spacing: 0.1em;
  background: #fff;
  color: #4b3e14;
  border: 2px solid #fff;
  font-weight: 600;
  padding: 1em 2em;
  margin-top: 20px;
  cursor: pointer;
  transition: 0.2s;
}

#button:hover {
  border-color: #29376a;
}
const btn = document.getElementById("button"); // button要素取得
const txt = document.getElementById("text").textContent; // テキスト取得

btn.addEventListener("click", () => { // ボタンをクリックしたら
  navigator.clipboard
    .writeText(txt) // テキストをクリップボードに書き込み(=コピー)
    .then(
      (success) => console.log('テキストのコピーに成功'),
      (error) => console.log('テキストのコピーに失敗')
    );

  btn.innerHTML = "OK!"; // ボタンの文字変更
  setTimeout(() => (btn.innerHTML = "COPY!"), 1000); // ボタンの文字を戻す
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.