How to Add a Copy to Clipboard button using HTML, CSS & JS

To create the copy to the clipboard button, you need to first add the element in your post editor and then switch to HTML view and add an “Id” that we defined in the Javascript below. Then you have to add the button code below the element with the button Id and paste the Js code after it. So, if you are using a single button on a page then you just need to add the id in the HTML element only (like Blockquote, code box) and place the CSS and Js code after it. But, if you want to add multiple buttons on one page then you have to change the Button Id and the element id.

<blockquote id="myInput"> 
//Add Your Text Here//
</blockquote>

<button class="isuru-copy-button" id="isurubutton"><svg aria-hidden="true" height="1em" preserveaspectratio="xMidYMid meet" role="img" viewbox="0 0 24 24" width="1em" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13 6.75V2H8.75A2.25 2.25 0 0 0 6.5 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9A2.25 2.25 0 0 0 20 17.25V9h-4.75A2.25 2.25 0 0 1 13 6.75z" fill="currentColor"><path d="M14.5 6.75V2.5l5 5h-4.25a.75.75 0 0 1-.75-.75z" fill="currentColor"><path d="M5.503 4.627A2.251 2.251 0 0 0 4 6.75v10.504a4.75 4.75 0 0 0 4.75 4.75h6.494c.98 0 1.813-.626 2.122-1.5H8.75a3.25 3.25 0 0 1-3.25-3.25l.003-12.627z" fill="currentColor"></path></path></path></g></svg>Copy</button>  


<style>
.isuru-copy-button svg{margin-right: 10px;vertical-align: top;}  
.isuru-copy-button{
  height: 45px; width: 100px; color: #fff; background: #265df2; outline: none; border: none; border-radius: 8px; font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer; transition: all 0.4s ease;}
.isuru-copy-button:hover{background: #2ECC71;}
@media (max-width: 480px) {#isurubutton{width: 100%;}}
</style>


<script>
  function copyFunction() {
  const copyText = document.getElementById("myInput").textContent;
  const textArea = document.createElement('textarea');
  textArea.textContent = copyText;
  document.body.append(textArea);
  textArea.select();
  document.execCommand("copy");
  isurubutton.innerText = "Text copied";
    textArea.remove();
}
document.getElementById('isurubutton').addEventListener('click', copyFunction);
  </script>

So, you can see the preview here. Just click on the above button and the codes in the code box will be copied to your clipboard with a single click.