Animated copy to clipboard button

This code makes any element with data-copy-url copy the current page URL when clicked and adds a class to the button for 2.5s. Allowing for some fun confirmation animations with css.

JavaScript

1document.querySelectorAll('[data-copy-url]').forEach(function(copyTriggerElement) {
2  copyTriggerElement.addEventListener('click', function() {
3    navigator.clipboard.writeText(window.location.href).then(function() {
4      copyTriggerElement.classList.add('is-copied');
5      setTimeout(function() {
6        copyTriggerElement.classList.remove('is-copied');
7      }, 2500);
8    });
9  });
10});

‍

HTML Attributes

<button data-copy-url>Copy URL</button>

‍

CSS Animation Example

1[data-copy-url] {
2  transition: all 0.3s ease;
3}
4
5[data-copy-url].is-copied {
6  background-color: #10b981;
7  color: white;
8}
9
10[data-copy-url].is-copied::after {
11  content: " ✓ Copied!";
12}