Create Copy to Clipboard functionality using HTML CSS JS

Create a smooth and responsive Copy to Clipboard functionality using plain HTML, CSS and JavaScript. This interactive snippet is ideal for modern websites where users need to copy URLs or referral links with a single click. Featuring clean design, subtle icon animations and an intuitive user experience — this is a must-have component for any modern UI.

HTML Structure

Let’s begin by building a semantic structure for the clipboard copy link button. It contains a wrapper div with a link display and a button to trigger the copy action.

<div class="main-container">
    <div class="wrapper">
        <div class="link-container">https://www.codewebstack.com</div>
        <button class="copy-btn" onclick="copyToClipboard()">Copy</button>
    </div>
</div>

The .link-container shows the URL, while the .copy-btn triggers the clipboard copying. The link is wrapped for responsiveness and includes an icon via Bootstrap Icons that changes on successful copy.

Styling with CSS

The styling uses Flexbox, icon pseudo-elements and responsive behavior to make the Copy to Clipboard functionality UI look modern and minimal. Glassy borders, ellipsis overflow and smooth transitions enhance UX.

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css');

.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 400px;
}

.wrapper {
    font-family: 'calibri';
    color: #ffffff;
    display: flex;
    gap: 10px;
}

.link-container {
    padding: 8px 18px 8px 40px;
    border: 1px solid wheat;
    border-radius: 35px;
    color: #c9c9c9;
    font-size: 15px;
    align-items: center;
    position: relative;
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-container::before {
    content: '\f470';
    position: absolute;
    top: 55%;
    left: 22px;
    font-family: "bootstrap-icons", bootstrap-icons;
    font-size: 1.2rem;
    color: white;
    transform: translate(-50%, -50%);
}

.link-container.copied::before {
    content: "\f26f";
    color: #81ec90;
}

.copy-btn {
    font-size: 16px;
    color: white;
    background: #1b3962;
    border: none;
    padding: 5px 15px;
    width: 95px;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
}

We use ::before for icon changes (from link to success check) and button hover effects are handled in JavaScript for real-time feedback. The layout is fully responsive and centers the content vertically and horizontally.

JavaScript Implementation

JavaScript handles the clipboard interaction and dynamic icon/text update. It’s simple and efficient using the navigator.clipboard.writeText() API.

const copyBtn = document.querySelector('.copy-btn');
const linkContainer = document.querySelector('.link-container');

function copyToClipboard() {
    navigator.clipboard.writeText(linkContainer.innerText);
    
    copyBtn.innerText = 'Copied!';
    linkContainer.classList.add('copied');

    setTimeout(() => {
        linkContainer.classList.remove('copied');
        copyBtn.innerText = 'Copy';
    }, 1000);
}

copyBtn.addEventListener('click', copyToClipboard);

This code listens for a button click, copies the link text to the clipboard, updates the button label to “Copied!” and visually switches the link icon. After 1 second, it resets the button and icon for usability.

This Copy to Clipboard UI component is a powerful, minimalist tool for any modern website. Whether you’re building a blog, portfolio, SaaS dashboard or eCommerce store, adding this feature improves UX and increases interaction rates.

No external dependencies are required apart from Bootstrap Icons and the component is fully responsive, lightweight and customizable.

Live Preview