How to create a copy-to-clipboard widget using HTML, CSS, and jQuery

create a copy-to-clipboard widget

Let’s create a copy-to-clipboard widget using HTML, CSS, jQuery. This kind of project can be useful when you are building an HTML website and if there is some piece of content that you want the viewer to copy.

create a copy-to-clipboard widget

Table of Contents


So let’s start this by building the structure using Html. In this HTML page I’ve linked google font “Montserrat”, and also I’ve linked CDN for font-awesome. Most importantly I’ve linked jQuery 3.6 from google. You can just google search google jQuery and you’ll be able to find this link.

<!DOCTYPE html>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Copy To Clipboard With JQuery</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="preconnect" href="">
        <link rel="preconnect" href="" crossorigin>
        <link href=";400;500;600;700&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <script src=""></script>

        <link rel="stylesheet" href="style.css">

        <div class="container">
            <h1>Copy to Clipboard</h1>
            <textarea id="textField" class="text-field">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui totam quidem architecto, explicabo doloremque pariatur nobis voluptate dicta voluptates molestias sed repellat quas id veritatis eligendi officiis esse. Explicabo, eos.
            <button class="copy-btn">Copy<i class="fas fa-clone"></i></button>
            <span class="copied">Copied!</span>

    <script src="main.js"></script>

So, You are done with the HTML, now it is time to style this page using CSS


Now it is time to style this page using CSS. Using the following CSS codes you’ll be able to change your HTML structure to a widget that has styled elements.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #f3f4f7;
    font-family: 'montserrat', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;

input, textarea, button {
    font-family: inherit;

.container {
    width: 420px;
    height: 530px;
    padding: 25px;
    background-color: #f3f4f7;
    border-radius: 10px;
    box-shadow: 0 0 25px 5px rgba(83, 87, 95, 0.25);

h1 {
    padding: 20px 0;
    color: #090909;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;

.text-field {
    width: 100%;
    height: 230px;
    margin: 20px 0;
    padding: 10px;
    background: transparent;
    border: 1px solid #52565e;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    resize: none;

.copy-btn {
    padding: 10px 15px;
    color: #f3f4f7;
    background-color: #037ef3;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    outline: none;
    cursor: pointer;

.copy-btn i {
    padding-left: 10px;

.copy-btn:active {
    transform: scale(0.98);

span.copied {
    display: block;
    margin-top: 50px;
    text-align: center;
    font-size: 26px;
    color: #858585;
    transition: all 0.5s;

span.bounce-effect {
    animation: bounceIn 0.8s linear;

/* BounceIn Animation */

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    20% {
        transform: scale(1.1);
    40% {
        transform: scale(0.9);
    60% {
        opacity: 1;
        transform: scale(1.03);
    80% {
        transform: scale(0.97);
    100% {
        opacity: 1;
        transform: scale(1);


So now it is time to make things work for this widget using the following jQuery code. This jQuery code will allow the content in the text area to be copied when the button is clicked and also an animated Copied text will pop-up

$(document).ready(function () {
    //Make two functions to add and remove the class in the span
    function add() {

    function remove() {

    // Call the functions and copy the text on button click
    $(".copy-btn").click(function () {
        setTimeout(remove, 800);

So this is how you create a copy-to-clipboard widget using HTML, CSS, and jQuery. Now you have your own copy-to-clipboard widget. You can customize it however you want and add it to your website or any of your projects.

Hope this post helped you. If it did, please share this post on social media!

You may also like to read: How to create and deploy a website on GitHub pages for free

(Visited 47 times, 1 visits today)
Dasun Sucharith

Dasun Sucharith

Experienced Founder with a demonstrated history of working in the information services industry. Skilled in Software Development, Web Development, Mobile App Development, Public Speaking, and Management. Strong business development professional with a Bachelor's degree in Electronic Engineering focused on Computer Systems Networking and Telecommunications from SLIIT.
Share on facebook
Share on twitter
Share on linkedin

Leave a Reply