<input type="text" id="input"> 
  <button onclick="copytext()" type="button">Скопировать</button>

 body {
  text-align: center;
  margin-top: 10%;
  background-color: #000;
}
 input, button {
  padding: .4em;
  width: 200px;
  font-size: 20px;
  border: none;
  outline: none;
  border-bottom: .2em solid #E91E63;
  background: rgba(#E91E63, .2);
  color: #E91E63;
}

 function copytext() {
  const copyText = 
  document.getElementById('input'); 
  const copy = copyText.value;
  navigator.clipboard.writeText(copy).then(
  function () { 
  console.log('Успешно'); 
  }).catch(function (err) { 
  console.log('Something went wrong', err);
  });
  
  alert("Copied the text: " + copyText.value);
} 

<textarea></textarea>
<button>Speak</button>

button {
  width: 85px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
textarea, button {
  border: 1.5px solid #000;
  border-radius: 5px;
  outline: none;
  padding: 8px;
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

const button = document.querySelector('button');
const text = document.querySelector('textarea');

button.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(text.value);
  speechSynthesis.speak(utterance);
});

@font-face {
  src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
  format("woff2");
  font-family: "Meta";
}
body {
  background-color: #8357eb;
}
h1 {
  transition: all 0.8s;
  -webkit-text-stroke: 4px #d6f4f4;
  font-variation-settings: "wght" 900, "ital" 1;
  font-size: 15rem;
  text-align: center;
  color: transparent;
  font-family: "Meta", sans-serif;
  text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0, 20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;
  cursor: pointer;
}
h1:hover {
  font-variation-settings: "wght" 100, "ital" 0;
  text-shadow: none;
}

<svg viewbox="0 0 999 999">
    <path class="path" fill="#333" stroke="white" stroke-width="2" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

body {
  background: #333;
}
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: path 5s linear alternate infinite;
}
@keyframes path {
  from {
    stroke-dashoffset: 999;
  }
  to {
    stroke-dashoffset: 0;
  }
}

span {
  font: 700 4em/1 "Oswald", sans-serif;
  text-shadow: 0 0 80px rgba(255,255,255,.5);
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: filling 80s linear infinite;
  transform: translate3d(0,0,0);
}

@keyframes filling {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

button {
  width: 280px;
  height: 80px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin: 20% auto;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  transition: all 1s ease-in-out;
  cursor: pointer;
}
button:hover {
  background-position: 100% 0;
  transition: all 1s ease-in-out;
}
button {
  background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}