WordPress Website – Copy to Clipboard ( Text and Code Click to Copy Button ) https://youtu.be/MXkUCFo5n9g

✅ Timestamp:
00:00 Intro
00:12 Install & Activate Copy Anything to Clipboard Plugin in Your WordPress Website
00:43 Add Text or Code in Between Pre tag in the post
03:12 Add CSS in Additional CSS
03:52 Customize Clipboard
04:16 Customize Copy Button

✪ Steps to Add Copy to Clipboard WordPress Website
– Login to Your WordPress Website Dashboard
– Hover on Plugins Tab
– Click on Add New
– Now Search for Copy Anything to Clipboard
– Install & Activate This Plugin https://wordpress.org/plugins/copy-the-code/
– Now Simply Add Text or Code with Pre tag
– Add CSS to Customize Copy to Clipboard
– Done.

Copy To Clipboard – Add This CSS in Additional CSS ??

/*------- 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);