<div class="unclebigbay__article">
  
<!-- TEXT FIELD  -->
  <section>
    <textarea id="shareCaption">
      I just read one of unclebigbay's article on @hashnode.
      
      You can read more by clicking the link below 👇.
    </textarea>
    </section>
  
<!-- BUTTONS SECTION -->
  <section>
    
  <!-- The button used to copy the caption -->
  <button class="btn copy__btn" onclick="copyCaption()">Copy Caption</button>
<!-- button to share to linkedIn -->
<a 
href="https://www.linkedin.com/sharing/share-offsite/?url=unclebigbay.hashnode.dev" 
target="_blank" 
rel="noopener noreferrer"
class="btn linkedin__btn"
>
Share on LinkedIn
</a>
<section>
 <div>
.unclebigbay__article{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  gap: 30px;
}

#shareCaption{
  padding: 10px;
  min-width: 300px;
  min-height: 100px;
  text-align: center;
}

.btn{
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 20px;
  cursor: pointer;
}

.copy__btn{
  border: 1px solid rgb(31,65,130);
  transition: 0.3s ease;
}

.copy__btn:hover{
  background: rgba(31,65,130, 0.9);
  color: #FFFFFF;
}

.linkedin__btn{
  background: rgb(31,65,130);
  color: #FFFFFF;
}


.linkedin__btn:hover{
  background: rgba(31,65,130,0.8);
  
}
const copyCaption = () =>{
  /* Get the text field */
  var copyText = document.getElementById("shareCaption");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* notify the user that the text has been copied */
  document.querySelector(".copy__btn").innerText = "Text Copied!"
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.