- Página Inicial
- Códigos CSS Prontos
- Tela de Login Html
- Voltar
Tela de Login Html
Nesse tutorial você vai aprender como é simples desenvolver uma tela de login utilizando somente HTML e CSS.

Tutorial Completo: Construindo uma Tela de Login Personalizada com HTML e CSS
Aprenda a construir telas de login personalizadas e eficientes utilizando HTML. Explore as principais tags e atributos para criar formulários intuitivos e garantir a segurança dos dados dos usuários. Descubra como combinar HTML com CSS para dar vida às suas interfaces e oferecer uma experiência de login memorável.
Código HTML:
Neste exemplo, criamos um formulário de login com um campo de USUÁRIO, SENHA e um BOTÃO de enviar os dados inseridos nos campos.
O atributo action
do formulário especifica a página que processará o envio dos campos, quando o usuário clica no botão entrar.
<form class="formulario-login" action="#" method="post">
<h2>Formulário de Login</h2>
<input type="text" name="usuario" placeholder="Usuário"/>
<input type="password" name="senha" placeholder="Senha"/>
<input type="submit" value="Entrar" />
<a href="#" title="Cadastro">Cadastro</a>
</form>
Estilização com Códigos CSS:
O CSS é usado para estilizar a aparência do formulário. Você pode personalizar cores, fontes, bordas, espaçamento e outros aspectos visuais.
.formulario-login{
background:#F3F3F3;
margin:auto;
width: 50%;
max-width:400px;
padding:30px;
border:1px solid rgba(0,0,0,0.2);
border-bottom:5px solid rgba(0, 124, 255);
border-radius:15px;
}
.formulario-login h2 {
text-align: center;
margin-bottom:20px;
color:rgba(0,0,0,0.5);
}
.formulario-login input{
display:block;
width:100%;
background:#f3f3f3;
border:none;
margin:30px 0;
padding:10px;
border-bottom:1px solid rgba(0,0,0,0.2);
outline:none;
}
.formulario-login input[type="text"]:focus , [type="password"]:focus{
border-bottom:2px solid rgba(0,0,0,0.9);
}
.formulario-login input[type="submit"]{
background:rgba(0, 124, 255);
opacity:0.9;
border:none;
border-radius:30px;
color:white;
font-size:1em;
cursor:pointer;
}
.formulario-login input[type="submit"]:hover{
opacity:1;
transition:.2s;
}
.formulario-login input[type="submit"]:active{
transform:scale(0.95);
}
.formulario-login a{
display:block;
text-align:center;
text-decoration:none;
color:rgba(0,0,0,0.5);
}
.formulario-login a:hover{
text-decoration:underline;
color:rgba(0,0,0,0.8);
}
@media(max-width:780px){
.formualrio-login { width:75%; }
}
@media(max-width:480px){
.formulario-login { width:95%; }
}
Veja o Resultado baixo!
Tela de Login Html
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como criar uma tela de login com html css
.
Lembre-se:
- Este é apenas um exemplo básico. Você pode personalizar a aparência e a funcionalidade do seu formulário de acordo com suas necessidades.
- Existem muitos recursos e bibliotecas disponíveis para ajudá-lo a criar formulários mais complexos.
Com um pouco de esforço, você pode criar telas de login personalizada que seja útil, bonita e aprimore a experiência do usuário em seu site.
existem diversas formas de estilizar Telas de logins com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Publicado por: Loop Nerd
486 Visualizações
Deixe um comentário