Введите анимацию с помощью CSS и HTML

Question

Я пытаюсь сделать анимацию в CSS, в которой у меня есть INPUT (текст) и метка. У этой метки есть текст. Когда пользователь нажимает кнопку «Ввод», я хочу, чтобы текст с надписи поднимался над входом.

.tpinput{
  width: 50%;
  display: block;
  margin-top: 25px;
  margin-left: -20px;
  padding: 7px;
  font-size: 15px;
  color: black;
  outline: none;  
  background: transparent;
  border: none;
  border-bottom: 1px solid #0043FF;
}

.tplabel{
  position: relative;
  margin-left: -25px;
  top: -75px;
  transition: 0.4s ease;
  color: #0043FF;
}

.cadastro input:focus + .tplabel {
  top: -70px;
  font-size: 18pt;
  left: -10px;
 } 

<div class="alinhamento">
        <h1 id="cadtitulo">Cadastro</br></h1>
        <form action="includes/signup.inc.php" method="POST">
          <div class="cadastro">
            <input type="text" id="nomecomp" name="nomecomp" class="tpinput" required/>
            </br>
            <label for="nomecomp" class="tplabel"><span class="content-name">Nome Completo</span></label>

            <input type="text" class="tpinput1" id="signup-nome" name="nome" required/>
            <label for="signup-nome" class="tplabel1"><span class="content-name">Username</span></label>
            </br>

            <input type="email" id="signup-email" name="email" class="tpinput2" required/>
            <label for="signup-email" class="tplabel2"><span class="content-name">Email</span></label>
            </br>

            <input type="password" id="signup-password" name="snh" class="tpinput3"required/>
            <label for="signup-password" class="tplabel3"><span class="content-name">Senha</span></label>
            </br>

            <input type="password" id="signup-password1" name="snh-repetir" class="tpinput4"required/>
            <label for="signup-password1" class="tplabel4"><span class="content-name">Repetir senha</span></label>
            </br>

            <input type="tel" id="telefone" name="telefone" class="tpinput5" maxlength="13" required/>
            <label for="telefone" class="tplabel5"><span class="content-name">Telefone</span></label>
            </br>

            <input type="text" id="chave" name="chave" class="tpinput6" required/>
            <label for="chave" class="tplabel6"><span class="content-name">Key</span></label>
            </br>

            <button type="submit" class="btn-register" name="registrar">Registrar</button>
          </div>
        </form>
      </div>

Я хочу, чтобы это работало и для всех остальных ярлыков.