Copy Text to Clipboard Button in HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create Copy Text to Clipboard Button using HTML CSS & JavaScript. Previously I have shared a Working Calculator using HTML CSS & jQuery, now it's time to create copying to the clipboard Button using JavaScript.

What does 'Copied to Clipboard' mean? The clipboard is where content goes on your device and computer when you Copy something to Paste later. In Keeper, you can copy record information to the clipboard by tapping the clipboard icon next to the field that you wish to copy.

As you can see in the image, there are two textarea box and one copy button. When you click on that copy in clipboard button the upper texts will be selected and copied.

When you click on that button there is a small tooltip that will appear with sliding from the left side. That tooltip used to inform a user the text has been successfully copied.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Copy Text to Clipboard Button).

Video Tutorial of Copy to Clipboard Button in Javascript

I hope you understood the basic codes behind the creating of this program. As you have seen in the video, to create this program I used HTML CSS & Javascript. Using only HTML & CSS to create this program is impossible. I used HTML & CSS for styling elements like textarea, button, and tooltip. And, I used Javascript Document.execCommand('copy') to copy the contents.

If you like this program (Copy Text to Clipboard Button) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Copy Text to Clipboard in HTML CSS & Javascript [Source Codes]

As always, before sharing the codes of this program (Copy Text to Clipboard Button). Let's a few talk about the main tags and codes of this program. In HTML File, first I created a <div> tag with the class name "container" and placed all other tags like <textarea>, <span> and <button> tag inside it. Inside <textarea> I written some text to copy.

In the CSS File, first I placed all elements at the center using a CSS grid property. Then I did basic styling to textarea and button. Using span selector I created a small tooltip to inform the user the content has been copied or not. Then I hide that tooltip and coded to show a tooltip when the button will be clicked.

In the Javascript File, first I called all HTML Tag using CSS Selector. Then I coded to select all content of textarea when the button triggered or clicked. After that, I wrote an if-else statement to copy all selected text. Inside if statement I used Javascript Document.execCommand('copy') to copy the contents and in else condition I shown an alert if the program failed to copy.

To create this program (Copy Text to Clipboard Button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Copying Texts in Clipboard | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <!-- NOTE: Due to many textarea tag in the code I got error..So I wrote changeit tag..Replace this changeit tag with textarea tag -->
      <changeit id="copyText" cols="60" rows="5">Welcome to CodingNepal. CodingNepal is a channel where you can learn HTML, CSS, and Javascript tutorials along with creative CSS Animations and Effects. We provide free resources to inspire design-focused frontend developers. Improve your coding skills with our free programs and video tutorials.</changeit>
      <br />
<div class="btn">
<button>copy in clipboard</button><span class="tooltip">copied</span></div>
<!-- NOTE: Due to many textarea tag in the code I got error..So I wrote changeit tag..Replace this changeit tag with textarea tag -->
<changeit cols="60" id="pasteText" placeholder="Paste your copied content here.." rows="5"></changeit>
    
    <script>
      const copyText = document.querySelector("#copyText");
      const pasteText = document.querySelector("#pasteText");
      const button = document.querySelector("button");
      const tooltip = document.querySelector(".tooltip");
      button.addEventListener('click', function(){
        copyText.select();
        pasteText.value = "";
        tooltip.classList.add("show");
        setTimeout(function(){
          tooltip.classList.remove("show");
        },700);
        if(document.execCommand("copy")){
          pasteText.focus();
        }else{
          alert("Something went wrong!");
        }
      });
    </script>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
}
::selection {
  color: #fff;
  background: #18b495;
}
textarea{
  padding: 10px;
  font-size: 17px;
  resize: none;
  text-align: justify;
  color: #202020;
}
textarea:focus{
  outline-color: #16a085;
  border-color: #16a085;
}
.btn{
  margin: 5px 0 40px 0;
}
.btn button{
  padding: 9px 15px;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 500;
  background: linear-gradient(#18b495,#16a085);
  border: none;
  color: #f2f2f2;
  cursor: pointer;
  letter-spacing: 1px;
  border-radius: 3px;
  outline: none;
}
.btn .tooltip{
  position: relative;
  margin-left: -10px;
  font-size: 17px;
  font-weight: 500;
  color: #f2f2f2;
  z-index: -1;
  background: linear-gradient(#18b495,#16a085);
  padding: 5px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, margin-left 0.4s;
}
.btn .tooltip.show{
  margin-left: 10px;
  opacity: 1;
  pointer-events: auto;
}
.tooltip:before{
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  background: linear-gradient(#18b495,#16a085);
  top: 50%;
  left: -5px;
  z-index: -1;
  transform: translateY(-50%) rotate(45deg);
}

Thanks for visiting, Keep visiting.

15 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

AldyJuly 28, 2020 at 5:35 AM
Good code😄😉
FouraSeptember 26, 2020 at 7:06 PM
Thank You so much CodingNepal i'm gonna Keep Visiting !
ElyOctober 19, 2020 at 7:07 PM
Not working on my compiler, also the html code is not complete
ItSourovDecember 24, 2020 at 7:06 PM
tooltip not working
Amit BiswasJanuary 25, 2021 at 6:45 PM
Is this code working with WordPress ?
DrewciferMarch 20, 2021 at 12:12 AM
I'm not sure why it's not working. I copy and pasted both sections, an index.html and a style.css file in the same directory at the same level. I did notice on your HTML section that you didn't close the BODY or HTML tags after your SCRIPT tags. But it still didn't work. It can't be my fault because I simply copy and pasted your simple html and your simple css files, but thank you for your efforts.
Manish ParmarMarch 27, 2021 at 4:59 PM
This codes works in blogger
If yes how it paste in to my post.only code or css file both
AseelApril 26, 2021 at 11:47 AM
Its not working, the button can't select text and copy the text :(

Video Tutorial of Copy to Clipboard Button in Javascript

Copy Text to Clipboard in HTML CSS & Javascript [Source Codes]

Thanks for visiting, Keep visiting.

15 Comments

Post a Comment

About Us

Contact Form

Copy Text to Clipboard Button in HTML CSS & Javascript

Video Tutorial of Copy to Clipboard Button in Javascript

Copy Text to Clipboard in HTML CSS & Javascript [Source Codes]

Thanks for visiting, Keep visiting.

You might like

15 Comments

Post a Comment

Contact Form