This gist contains the recipe to make a copy button.
It is activated by adding data-js="add-to-page"
to an element and including the CSS and JS files.
<link rel="stylesheet" href="https://gist.pother.ca/33b4d10024f56ba0610f8e70477687cb/copy-button.css">
<script async src="https://gist.pother.ca/33b4d10024f56ba0610f8e70477687cb/copy-button.js"></script>
<pre data-js="copy">Your Text Goes Here</pre>
The button itself is an SVG that is added to an HTML element using an ::after
pseudo-element.
The JS is an EventListener on a Click event, and uses navigator.clipboard
to copy the text.
Once the text is copied, the button is given a CSS class that changes the SVG to a checkmark.
Both SVG icons are taken from Material Line Icons.
Everything together is no more than 30 lines of CSS and JS!
It can be seen in action at https://gist.pother.ca/33b4d10024f56ba0610f8e70477687cb