<div class="Message">
  <input title="Write Message" tabindex="i" pattern="\d+" placeholder="Message.." class="MsgInput" type="text">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="30.000000pt" height="30.000000pt" viewBox="0 0 30.000000 30.000000" preserveAspectRatio="xMidYMid meet" class="SendSVG">
  <g transform="translate(0.000000,30.000000) scale(0.100000,-0.100000)" fill="#ffffff70" stroke="none">
  <path d="M44 256 c-3 -8 -4 -29 -2 -48 3 -31 5 -33 56 -42 28 -5 52 -13 52 -16 0 -3 -24 -11 -52 -16 -52 -9 -53 -9 -56 -48 -2 -21 1 -43 6 -48 10 -10 232 97 232 112 0 7 -211 120 -224 120 -4 0 -9 -6 -12 -14z"></path>
  </g>
</svg><span class="l"></span>
  
</div>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: #212121;
  font-family:arial;
}
.Message {
  width: 310px;
  height: 40px;
  border-radius: 10px;
  background-color: #40414f;
  transform: translate(0px,0px);
  box-shadow: 5px 5px #34343f;
}

.MsgInput {
  font-size: 18px;
  border-radius: 5px;
  background-color: #40414f;
  border: none;
  outline: none;
  width: 250px;
  height: 30px;
  transform: translate(5px,-3px);
  color: white;
  padding: 10px;
  font-weight: bold;
}

.SendSVG {
  width: 30px;
  height: 30px;
  border-width: 50px;
  transform: translate(20px,5px);
  background-size: 10px;
  border-radius: 10px;
  transition: 0.3s;
}

.SendSVG:hover {
  background-color: #2b2b35;
}

.l {
  position: absolute;
  width: 1%;
  height: 30px;
  background-color: #2e2f38;
  transform: translate(-20px,5px);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.