Formulário de Login Label Animado

Formulário de Login Label Animado

Este tutorial mostra como criar um formulário de login com label animado com html e css.

Nesta seção, projetaremos uma estrutura simples na tag <form>. 

temos dentro da tag <form> as tags <div><input>, <label>, e <button>.

Essas tags usaremos para criar o nosso formulário com o label animado.

Vamos Adicionar o HTML

    <form class="formulario" method="post" action="#">
      
        <div class="title icon icon-forward-1"> Login</div>
        
        <div class="input-container">
            <input id="nome" class="input" type="text" placeholder=""/>
            <div class="legenda-p"></div>
            <label for="nome" class="label icon icon-user-1"> Nome</label>
        </div>
        
        <div class="input-container">
            <input id="email" class="input" type="password" placeholder=""/>
            <div class="legenda-p"></div>
            <label for="email" class="label icon icon-lock-1"> Senha</label>
        </div>
        
        <button type="text" class="btn">Entrar</button>
        
    </form>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso Formulário.

.formulario {

  width: 320px;
  margin: auto;
  background-color: #0b0a0a;
  border-radius: 4px;
  box-sizing: border-box;
  height:auto;
  padding: 15px;
  
}

.title {

    font-family: 'open_sansregular';
    font-size: 2em;
    color: #dfb127;
    margin-bottom: 30px;
    border-bottom: 1px #202020 solid;
    padding-bottom: 10px;

}

.input-container {
  
  width: 100%;
  height: 50px;
  position: relative;
  margin-top: 20px;

}

.input {

  width: 100%;
  background-color: #131313;
  border-radius: 8px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  font-size: 18px;
  font-family: 'open_sansregular';
  height: 100%;
  outline: 0;
  padding: 4px 20px 0;

}

.legenda-p {

  background-color: transparent;
  border-radius: 8px;
  height: 20px;
  left: 20px;
  position: absolute;
  top: -20px;
  transform: translateY(0);
  transition: transform 200ms;
  width: 100px;

}

.input:focus ~ .legenda-p,
.input:not(:placeholder-shown) ~ .legenda-p {
  transform: translateY(8px);
  background-color: #dfb127;
}

.label {

  color: #393940;
  font-family: 'open_sansregular';
  left: 15px;
  line-height: 14px;
  pointer-events: none;
  position: absolute;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 20px;

}

.input:focus ~ .label,
.input:not(:placeholder-shown) ~ .label {
  transform: translateY(-30px) translateX(10px) scale(0.75);
}

.input:not(:placeholder-shown) ~ .label {
  color: #808097;
}

.input:focus ~ .label {
  color: #131313;
}

.btn {

  width: 100%;
  background-color: #dfb127;
  border-radius: 8px;
  border: 0;
  box-sizing: border-box;
  color: #0b0a0a;
  cursor: pointer;
  font-size: 1.2em;
  font-family: 'open_sansregular';
  height: 50px;
  margin-top: 20px;
  outline: 0;
  text-align: center;
  transition: 0.4s;

}

.btn:hover {
  
  background-color: #b78900;
  color: #eae3e3;

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo

Baixar Código Veja Funcionando