Formulário de Login Input Animado

Formulário de Login Input Animado

Neste artigo veremos como criar um Formulário de Login.

Para isso precisamos do HTML, CSS.

Nesta seção, projetaremos uma estrutura simples na tag <form>. temos dentro da tag <div> a tag <h2> com uma class=”title” para exibir Titulo login. também temos a tag <inpu>, <i>, <href> e <button> para criar o botão do formulário.

Veja o código html abaixo.

Vamos Adicionar o HTML

     <form class="login" method="post" name="login">
                
          <div class="padding">
          <h2 class="title"><i class="icon icon-user-1"></i> Login</h2>

            <input type="text" name="email" placeholder="Email" autofocus/>          
            <i class="icon icon-envelope"></i>

            <input type="password" name="senha" placeholder="Senha" />
            <i class="icon icon-key-1"></i>

            <a href="#" class="resgatarSenha" title="Resgatar Senha"><i class="icon icon-key-1"></i> Resgatar Senha</a>

            <button>
               <i class="spinner"></i>
               <span class="state">Entrar</span>
               <input type="hidden" class="btn fade_8S" name="login" value="Entrar">
             </button>
              
          </div>

    </form>

Vamos Adicionar o CSS

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

.login { 
    
    width:300px; 
    margin:auto;
    overflow:hidden;
    background:#ffffff; 
    font-family:'open_sanslight'; 
    border-radius:5px;  
    padding:10px 20px 20px 20px; 
    position:relative; 
    padding-bottom:80px; 
    box-shadow:0px 1px 5px rgba(0, 0, 0, 0.3); 
}

.login .title { 

    font-family:'open_sansregular'; 
    color:#2cc3c8; 
    font-size:1.2em;
    text-align:center; 
    font-weight:bold; 
    margin:10px 0 30px 0; 
    border-bottom:1px solid #eee; 
    padding-bottom:20px; 

}

.login input { 

    font-family:'open_sanslight'; 
    font-size:1em; 
    display:block; 
    padding:15px 10px; 
    margin-bottom: 10px; 
    width:100%; 
    border:1px solid #ddd; 
    transition: border-width 0.2s ease; 
    border-radius:50px; 
    color:#ccc; 

}

.login input + i.icon { 

    color:#fff; 
    font-size:1em; 
    position:absolute; 
    margin-top:-47px; 
    opacity:0; 
    left:0; 
    transition: all 0.1s ease-in; 
}

.login input:focus { 

    outline: none; 
    color:#2cc3c8; 
    border-color: #2cc3c8; 
    border-left-width:45px; 
}

.login input:focus + i.icon { 

    opacity:1; 
    left:35px; 
    transition: all 0.25s ease-out;
}

.login .resgatarSenha { 

    font-family:'open_sanslight'; 
    font-size:1em;
    color:#2cc3c8; 
    font-weight:100!important; 
    text-decoration:none; 
    text-align:center;
    display:block; 
    padding:0.5em 0em; 

}

.login button { 

    width:100%; 
    height:100%; 
    padding:10px 10px; 
    background: #2cc3c8; 
    color: #fff; 
    font-size:1.5em; 
    display: block; 
    border:none; 
    cursor:pointer; 
    margin-top:20px; 
    position: absolute; 
    left:0; 
    bottom:0; 
    max-height:60px; 
    border:0px solid rgba(0, 0, 0, 0.1); 
    border-radius: 0 0 2px 2px; transform: rotateZ(0deg); 
    transition: all 0.1s ease-out; 
    border-bottom-width: 7px; 
}

.login button:active { background-color:#4c4c4c; color:#ffffff; }

Combinando as duas seções acima Html + Css temos o seguinte Resultado do Formulário de Login Input Animado!

Veja o Resultado !

Baixar Código Veja Funcionando