Cool copy to clipboard button using HTML CSS and JavaScript

Hello friends, in this tutorial, we will learn how to Cool copy to clipboard button using HTML, CSS, and JavaScript.
This is a process in which we copy programs, images, and other elements to our clipboard for pasting in other places.

Why do we need it?

In our daily programming life, we use codes for many purposes such as developing applications, web pages, and other uses. In many situations, we came up with this type of requirement. Therefore, it becomes essential to develop a feature copy to our clipboard.
Also read: 3D Photo/Image Gallery (on space) Using HTML5 CSS JS

To understand the implementation of this, do read the HTML, CSS, and JavaScript codes.

HTML

<div class="text-11">
  <div class="text-1-box HTML">
    <div class="text-12">HTML Program:</div>
    <textarea id="HTML" readonly >
  &lt;div class=&quot;text-11&quot;&gt;
  &lt;div class=&quot;text-1-box HTML&quot;&gt;
    &lt;div class=&quot;text-12&quot;&gt;HTML Code:&lt;/div&gt;
    &lt;textarea id=&quot;HTML&quot; readonly &gt;
      text-12 CodeOn
    &lt;/textarea&gt;
    &lt;button id=&quot;HTMLButton&quot;&gt;Copy Codes&lt;/button&gt;
  &lt;/div&gt;
    </textarea>
    <button id="HTMLButton">Copy HTML Code</button>
  </div>
</div>

CSS

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap%22%20rel=%22stylesheet');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto" , serif;}
.text-11{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;}
.text-11 .text-1-box{
  height: auto;
  max-width: auto;
  width: 100%;
  margin: 10px 0;}
.text-11 .text-1-box .text-12{
  font-size: 20px;
  font-weight: 600;
  color: #21e81a;
  margin: 4px;}
.text-11 .text-1-box textarea{
  height: 100%;
  width: 100%;
  padding: 20px;
  font-size: 10px;
  font-weight: 400;
  outline: none;
  border: 1px solid #21e81a;
  border-radius: 8px;
  background: #ceccf0;}
.text-1-box textarea::-webkit-scrollbar{
  display: none;}
.text-11 .text-1-box button{
  height: 45px;
  width: 155px;
  color: #fff;
  background: #06bd92;
  outline: none;
  border: none;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 400;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.4s ease;}
.text-11 .text-1-box button:hover{
  background: #f10e61;}
@media (max-width: 450px) {
  .text-11 .text-1-box button{
    width: 100%;  }}</style>

JavaScript

<script>
let HTML = document.getElementById("HTML");
let HTMLButton = document.getElementById("HTMLButton");

HTMLButton.onclick = function() {
  HTML.select();
  document.execCommand("copy");
  HTMLButton.innerText = "Copied!"
}
</script>

Now, with just one click, we can copy our code. For styling elements like buttons, textarea, HTML and CSS are used and to copy the contents, JavaScript is used.

Cool copy to clipboard button using HTML CSS and JavaScript

Leave a Reply Cancel reply