Clipboard Copy & Feedback Generator

Generate a plug-and-play JS/CSS snippet for copy-to-clipboard functionality with visual feedback.

1. JavaScript

function setupClipboardButtons() {
    document.querySelectorAll('[data-copy-target]').forEach(button => {
        const originalContent = button.innerHTML;
        button.addEventListener('click', () => {
            const targetId = button.getAttribute('data-copy-target');
            const targetElement = document.getElementById(targetId);
            if (!targetElement) return;

            const textToCopy = targetElement.value || targetElement.innerText;
            navigator.clipboard.writeText(textToCopy).then(() => {
                button.innerHTML = '<span>Copied!</span>';
                button.classList.add('is-copied');
                setTimeout(() => {
                    button.innerHTML = originalContent;
                    button.classList.remove('is-copied');
                }, 2000);
            }).catch(err => {
                console.error("Failed to copy:", err);
            });
        });
    });
}
document.addEventListener('DOMContentLoaded', setupClipboardButtons);

2. CSS

.copy-button {
    transition: background-color 0.2s, color 0.2s;
    /* Add other button styles here */
}

.copy-button.is-copied {
    background-color: #28a745; /* Success Green */
    color: white;
    animation: pop-in 0.3s ease-out;
}

@keyframes pop-in {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

3. Example HTML

<!-- The text you want to copy -->
<pre id="code-to-copy">const greeting = "Hello, World!";</pre>

<!-- The button that triggers the copy -->
<button class="copy-button" data-copy-target="code-to-copy">
    <span>Copy Code</span>
</button>

About the Clipboard Feedback Generator

This tool generates a ready-to-use HTML, CSS, and JavaScript snippet to implement a "copy to clipboard" feature with instant visual feedback. It's a common UX pattern that improves usability by confirming to the user that an action was successful. The generated code is lightweight, dependency-free, and uses modern web APIs.

Clipboard Copy & Feedback Generator

1. JavaScript

2. CSS

3. Example HTML

About the Clipboard Feedback Generator

How do I use this code?

What does `data-copy-target` do?

Can I customize the feedback?

Does this work for text inside any element?