Wednesday, April 28, 2021

Copy Text Content To Clipboard - HTML CSS & Javascript

Coding Snow April 28, 2021 4 comment

Description

Hello everyone! In this video, you will learn how to create a button to copy text content to the clipboard using HTML, CSS and Javascript. This video will be useful for the website content publishers who want to give their users to copy and paste the text contents easily using this copy button. Hope this video will be helpful.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Copy Text Content To Clipboard - HTML CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
  </head>
  <body>

<div class="text-box">
      <div class="top-area">
        <h2>Content Title</h2>
        <div class="copy-btn"><i class="fas fa-copy"></i></div>
      </div>
      <textarea readonly spellcheck="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #79ABFF;
}

.text-box{
  position: relative;
  background: #fff;
  width: 650px;
  margin: 10px;
  padding: 0 20px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgb(1 1 1 / 10%);
}

.text-box .top-area{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.text-box .top-area h2{
  font-size: 1.5em;
  font-weight: 700;
}

.text-box .top-area .copy-btn{
  background: #eee;
  color: #999;
  font-size: 1.5em;
  width: 52px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

.text-box .top-area .copy-btn:hover{
  color: #222;
}

.text-box textarea{
  width: 100%;
  min-height: 450px;
  font-size: 1em;
  padding: 10px;
  outline: none;
  resize: none;
  border-radius: 5px;
  border: 1px solid #009FEF;
}

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

Start DNDMay 24, 2021 at 4:49 AM
Thanks Bro Help Full For Me
ReplyDelete
Replies
Pathak AayushDecember 31, 2021 at 6:18 AM
Bhai full code not coming please check
ReplyDelete
Replies
Shakil AhmmedAugust 22, 2022 at 6:23 AM
Provide JavaScript Please
ReplyDelete
Replies

Add comment

Wednesday, April 28, 2021

Copy Text Content To Clipboard - HTML CSS & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, April 28, 2021

Copy Text Content To Clipboard - HTML CSS & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form