<section>
  <input type="text" id="textInput" placeholder="Your text">
  <button id="copy" content=""  onclick="copyText(event)" ></button>
</section>
html, body{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

section{
  display: flex;
  flex-direction: column;
  box-shadow: chartreuse;
  box-shadow: 0 0 10px #cacaca;
  padding: 24px;
  width: 300px;
  height: 175px;
  max-width: 95%;
  justify-content: space-around;
  border-radius: 12px;
}

input[type="text"]{
  user-select: all;
  outline: none;
  padding: 10px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid grey;
}

button{
  outline: none;
  padding: 10px;
  font-size: 1rem;
  background: #f6f6f6;
  border: 1px solid grey;
  border-radius: 5px;
  cursor: pointer;
  color: black;
  &[content]{
    &:before {
      content: "Copy";
      color: black;
      font-size: 1rem;
    }
    &:hover{
      background: white;
      &:before {
        content: "Copy ?";
      }
    }
    &:focus{
      background: green;
      &:before {
        content: "Copied";
        color: white;
      }
    }
  }
}
View Compiled
// We select our input 
let input = document.getElementById("textInput");

// Copy the text of the input 
copyText = (e) => {
  // We check that the input is not empty 
  if (input.value.length) {
    // We copy the text it contains into the clipboard 
    navigator.clipboard.writeText(input.value).then(() => {
      // We confirm the action in the console 
      console.log("Text Copied !");
    })
  } else {
    console.log("The input is empty ");
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.