Carregando...

Formulário de Login Input Animado

Postado: 9 de agosto de 2022 Tempo de Leitura: 2 Minutos

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

Publicado por: Loop Nerd

550 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados