How to Copy to Clipboard using HTML, CSS & JavaScript

    Hello everyone today Cambo Its tech you about Copy Code to Clipboard.

Code HTML

<div class="container">
  <div class="label">
    Joining Link
  </div>
  <div class="copy-text">
    <input type="text" class="text" value="https://camboits.blogspot.com" readonly>
    <button>
      Copy
    </button>
  </div>
</div>

Code CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  font-family: "Roboto", sans-serif;
  background: #f0f2f7;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.label {
  padding: 10px;
  font-size: 18px;
  color: #111;
}
.copy-text {
  position: relative;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
}
.copy-text input.text {
  padding: 10px;
  font-size: 18px;
  color: #555;
  border: none;
  outline: none;
  padding-right: 50px;
}
.copy-text button {
  padding: 10px;
  background: #5784f5;
  color: #fff;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}
.copy-text button:active {
  background: #809ce2;
}
.copy-text button:before {
  content: "Copied";
  position: absolute;
  top: -45px;
  right: 0px;
  background: #5c81dc;
  padding: 8px 10px;
  border-radius: 20px;
  font-size: 15px;
  display: none;
}
.copy-text button:after {
  content: "";
  position: absolute;
  top: -20px;
  right: 25px;
  width: 10px;
  height: 10px;
  background: #5c81dc;
  transform: rotate(45deg);
  display: none;
}
.copy-text.active button:before,
.copy-text.active button:after {
  display: block;
}

Code JavaScript

let copyText = document.querySelector(".copy-text");
copyText.querySelector("button").addEventListener("click", function () {
  let input = copyText.querySelector("input.text");
  input.select();
  document.execCommand("copy");
  copyText.classList.add("active");
  window.getSelection().removeAllRanges();
  setTimeout(function () {
    copyText.classList.remove("active");
  }, 2500);
});

Full Code => Click Here