SOURCE

const btn=document.getElementsByTagName('button');
/*function click(){
  const input=document.getElementsByTagName('input');
  if(input[0] == '') 
  {console.log("Please write down your Username")
  }
  if(input[1] == '') 
  {console.log("Please wirte down your Password")
  }
}*/
btn.onclick = console.log("123");

<div class="container">
  <h2>
    Login
  </h2>
  <div class="login-input">
    <input type="textarea">
    <label>
      Username
    </label>
  </div>
  <div class="login-input">
    <input type="textarea">
    <label>
      Password
    </label>
  </div>
  <div class="login-btn">
    <button type="submit" value="Submit">
      Submit
    </button>
  </div>
</div>

* {
  color: #fff;
  font-size: 15px;
  font-familt: '微软黑体';
}

.container {
  background-color: #2e2e2e;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.container h2 {
  text-align: center;
  font-size:30px;
}

.container .login-input {
  margin: 20px 10px;
  position: relative;
}

.container .login-input input {
  width: 80%;
  padding: 10px 0;
  font-size: 16px;
  color: #000;
  border: none;
  border-bottom: 2px solid #fff;
  outline: none;
  background: transparent;
}

.container .login-input label {
  position: absolute;
  top: 2px;
  left: 0px;
  color: #fff;
  font-size:20px;
  pointer-events: none;
  transition:0.5s;
}

.container .login-input input:focus ~ label,
.container .login-input input:invalid ~ label {
  top: -15px;
  left:0;
  font-size:12px;
}

.container .login-btn button {
  margin-left: 10px;
  background-color: #37c;
  border: 0px solid #fff;
  border-radius: 5px;
  width: 80px;
  height: 30px;
  text-align: center;
  font-size:14px;
}