<form>
  <div class="message">
    <input type="text" placeholder="EMAIL">
    <button type="submit">
      <div class="telegram"></div>
      <button>
  </div>
</form>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 10px 0 0 10px;
}

.message {
  width: 300px;
  height: 60px;
  padding-right: 50px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.message button[type="submit"] {
  display: block;
  width: 50px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  outline: none;
  border: none;
  cursor: pointer;
}

.message input {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  font-size: 22px;
  padding-left: 20px;
}

.message button .telegram {
  width: 50px;
  height: 100%;
  padding: 10px;
  background: #ff6d6d;
  transition: 0.14s;
}

.message button .telegram svg {
  fill: #fff;
  margin-top: 5px;
}

.message:hover .telegram {
  background: #e01762;
}

let telegram = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931l3.622-16.972.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693 12.643-7.911c.595-.394 1.136-.176.691.218z"/></svg>`;

document.querySelector(".telegram").innerHTML = telegram;