How to make a copy to clipboard button?

Home » Blog » How to make a copy to clipboard button?

Copy to clipboard button was created easily using clipboard.js.

So here’s how I create the copy to clipboard button…

Firstly, I added the clipboardjs script hosted from on top of my post (can either be on the head or body tag).

[sourcecode language=”plain”]<script src=""></script>

Next, is I added another js script to instantiate the clipboard by passing a string selector. (you can also do it by passing an HTML element or lists of HTML elements).

[sourcecode language=”plain”]<script>
var clipboard = new ClipboardJS(‘.btn’);
clipboard.on(‘success’, function(e) {
clipboard.on(‘error’, function(e) {

Now, set the text to be copied and create an ID.

[sourcecode language=”plain”]<div id="copy-css">
#et-top-navigation .mydashboard {
display: none;

Finally, create the button. Add the class name you instantiated and also add the div ID on the data target.

[sourcecode language=”plain”]<button class="btn" data-clipboard-target="#copy-css">
Click to copy

At this moment, the button should now work. To demonstrate, you can check the live result of this tutorial here.