Copy Text Content To Clipboard | Textarea Copy Button - HTML CSS & Javascript

Copy Text Content To Clipboard | Textarea Copy Button - HTML CSS & Javascript

In this video, you will learn how to create a button to copy text content to the clipboard using HTML, CSS and Javascript.

In this video, you will learn how to create a button to copy text content to the clipboard using HTML, CSS and Javascript.

Subscribe: https://www.youtube.com/c/CodingSnow/featured

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.

      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:[email protected];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;
}

html css javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript. Let's create a custom select dropdown in HTML.

Slideshow with HTML, CSS, and JavaScript / How to Create a Slideshow with HTML, CSS, and JavaScript

In this tutorial, we will build a Slideshow of the Social Media Icons with HTML, CSS, and JavaScript

Image slider in HTML, CSS and, JavaScript || Carousel in HTML, CSS, and, JavaScript

Create a simple and responsive image slider or carousel using HTML, CSS, and javaScript.

Calendar with HTML, CSS, and JavaScript - How to build calendar using HTML, CSS, and JavaScript

In this tutorial, we will build a Calendar with HTML, CSS, and JavaScript

Slideshow with HTML, CSS, and JavaScript / How to create Slideshow using HTML, CSS, and JavaScript

In this tutorial, you will learn about how to build a cool Slideshow using HTML, CSS, and JavaScript