This page contains the recipe to make a copy button.
It is activated by adding data-js="copy" to an element and including the CSS and JS files.
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 below.
<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>