How to create a copy to clipboard button in WordPress ?

In this article, we will discuss how to add a click to copy button.

There are various occasions in web development where we have to give user functionality to copy something into a clipboard using a button. Whether it is a sample of code or it is the User’s own information, we can create a copy button easily to copy data to the clipboard using this simple plugin.

Let’s see about how to install and add this button correctly to our posts.

Additional CSS

If you want you can give some extra beauty to that button by using below CSS codes.

/*------- CSS for Copy to ClipBoard ------*/
.copy-the-code-wrap {
box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
}
.copy-the-code-wrap .copy-the-code-target {
color: #7a7a7a;
background: #eee;
font-size: 13px;
font-family:
}
.copy-the-code-wrap .copy-the-code-button {
top: 0;
right: 0;
padding: 10px 20px;
color: #fff;
font-family: roboto;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
background: #0066ff;
}
.copy-the-code-wrap .copy-the-code-button:hover {
background: #000;
}
/*----------XXX-- CSS for Copy to ClipBoard -----XXX--------*/

CSS for Gradient Color on Copy to Click Button

background: #first-color;
background: -webkit-linear-gradient(to right, #first-color, #second-color);
background: linear-gradient(to right, #first-color, #second-color);

CSS For Hover Gradient Color on Copy to Click Button

background: #second-color;
background: -webkit-linear-gradient(to right, #second-color, #first-color);
background: linear-gradient(to right, #second-color, #first-color);

Share on:

Leave a Comment