Click to copy text

DEMO

Step 1: Add HTML to a code snippet

<div class="button-container">
<input type="text" value="https://northplugins.com" id="share">
<button onclick="shareMe()" class="share-btn">Copy Share Link</button>
</div>

Step 2: Add JS - Select the button and the value of the you want copied. (Change the value in the input to whatever it is you want copied)

<div class="button-container">
<input type="text" value="https://northplugins.com" id="share">
<button onclick="shareMe()" class="share-btn">Copy Share Link</button>
</div>

<script>
    const shareMe = () => {
    var copyText = document.querySelector('#share');
    var buttonText = document.querySelector('.share-btn');

    copyText.select();

   /* This will not work on an iPhone */
   document.execCommand("copy");
   buttonText.innerText = 'Copied!'
}

</script>

Step 3: Now underneath the Javscript, add the styling for the button that copies the text

<div class="button-container">
<input type="text" value="https://northplugins.com" id="share">
<button onclick="shareMe()" class="share-btn">Copy Share Link</button>
</div>

<script>
const shareMe = () => {
var copyText = document.querySelector('#share');
var buttonText = document.querySelector('.share-btn');

copyText.select();

 /* This will not work on an iPhone */
document.execCommand("copy");
buttonText.innerText = 'Copied!'
}

</script>

<style>

.button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.button-container input {
font-size: 16px;
padding-top: 20px;
text-align: center;
color: #F34841;
background: transparent;
border: transparent;
}

.share-btn {
margin-left: 10px;
padding: 10px 20px;
color: #ffffff!important;
border-radius: 4px;
font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
font-size: 14px;
font-style: italic!important;
background-color: #f34841;
border: 1px solid #f34841;
cursor: pointer;
transition: all .2s ease-in;
}

.share-btn:hover {
background-color: rgb(241,97,91);
}

</style>