Formulário Estilizado com HTML e Css
Postado: 27 de dezembro de 2021
Formulário Estilizado com Html e Css
Neste tutorial vamos criar um formulário estilizado com html e css
Vamos Adicionar o Html:
<div class="formulario">
<form class="form" action="">
<div class="form-item col-responsive">
<input class="input" type="text" name="nome" required="required" id="name"/>
<label class="label" for="nome">Nome</label>
</div>
<div class="form-item col-responsive">
<input class="input" type="text" name="email" required="required" id="email"/>
<label class="label" for="email">E-mail</label>
</div>
<div class="form-item">
<input class="input" type="text" name="assunto" required="required" id="assunto"/>
<label class="label" for="assunto">Assunto</label>
</div>
<div class="form-item">
<textarea class="textarea" name="mensagem" required="required" id="textarea"></textarea>
<label class="label" for="mensagem">mensagem</label>
</div>
<div class="form-item">
<input class="botao" type="submit" value="Enviar"/>
</div>
</form>
</div><!--Class Formulario-->
Vamos Adicionar o Css:
/*Formulário*/
input, textarea {
border: 0;
outline: 0;
font-size: 1.2em;
background: transparent;
color: #797979;
position: relative;
font-family: 'open_sansregular';
}
textarea { resize: none; }
.formulario {
max-width: 550px;
margin: 0 auto;
border-radius: 2px;
}
.form {
display: flex;
flex-wrap: wrap;
}
.form-item {
position: relative;
width: 100%;
padding: 1em;
}
@media only screen and (min-width: 768px) {
.form-item.col-responsive { width: 50%; }
}
.form-item .textarea {
height: 10em;
}
.form-item .input, .form-item .textarea {
display: block;
padding: 1em;
width: 100%;
transition: all 0.3s;
border-bottom: 2px solid #56D4D9;
}
.form-item .input:focus, .form-item .textarea:focus {
border-bottom: 2px solid #333333;
}
.form-item .input:valid + .label, .form-item .input:focus + .label, .form-item .textarea:valid + .label, .form-item .textarea:focus + .label {
top: 1em;
left: 1em;
font-size: 0.9em;
}
.form-item .input:valid, .form-item .textarea:valid {
border-bottom: 2px solid #56D4D9;
}
.form-item .label {
position: absolute;
top: 2em;
left: 2em;
text-transform: capitalize;
transition: all 0.3s;
}
.form-item .botao {
display: block;
width:120px;
padding: 0.8em 0.6em;
border:2px #56D4D9 solid;
border-radius:3px;
color: #56D4D9;
cursor: pointer;
transition: all 0.3s;
}
.form-item .botao:hover {
background: #828282;
color: #ffffff;
border:2px #828282 solid;
}
.form-item .botao:active {
background-color:#ff9000;
color:#ffffff;
border:2px #ff9000 solid;
}
/*Formulário*/
Veja o Resultado!
Baixar Código
Veja Funcionando
Publicado por: loopnerd
1.143 Visualizações
Deixe um comentário