Formulário html com inputs Animado com css Efeito Balão UP
Postado: 27 de março de 2023
Tempo de Leitura: 4 Minutos
Modelos de formulários html e css
Formulário html com inputs Animado com css Efeito Balão UP
Neste tutorial vamos criar um Formulário com os inputs html animado com css com efeito Balão Up
Um formulário é um elemento essencial em qualquer site. Ele permite que os visitantes enviem informações sobre si mesmos ou sobre seus negócios.
Como estilizar CSS no HTML?
Podemos estilizar são input , textarea e select mas esteja ciente de que ao estilizar um campo de input não só o campo será estilizado como também os outros inputs como radio boxes, check boxes e os botões Submit (Enviar) e Clear (Limpar). É seguro estilizar font-family e font-size .
O que são formulários HTML?
Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.
Nesta seção, projetaremos uma estrutura simples na tag <div>, <form>, <h1>, <p> , <span>, <input> <label> e a tag <type submit> para inserir o Botão de envio.
Essas são as tags que usaremos para criar o nosso Formulário.
Vamos Adicionar o HTML
<div class="box-formulario">
<div class="formulario">
<div class="title-form">
<h1>Fale Conosco</h1>
</div>
<form action="#" method="post">
<span>
<input type="text" class="input-balao-up" id="nome" name="nome" placeholder="Nome" autocomplete="off" required=""/>
<label for="nome"> <i class="icon icon-user-outline"></i> </label>
</span>
<span>
<input type="text" class="input-balao-up" id="email" name="email" placeholder="E-mail" autocomplete="off" required=""/>
<label for="email"> <i class="icon icon-mail-3"></i> </label>
</span>
<span>
<input type="text" class="input-balao-up" id="assunto" name="assunto" placeholder="Assunto" autocomplete="off" required=""/>
<label for="assunto"> <i class="icon icon-info"></i> </label>
</span>
<span>
<textarea type="text" class="textarea-balao-up" id="mensagem" name="mensagem" rows="3" placeholder="Mensagem" autocomplete="off" required=""></textarea>
<label for="mensagem"> <i class="icon icon-bubble-4"></i> </label>
</span>
<div class="box-btn">
<button type="submit" class="btn-envia zoom-shadow">
<i class="icon icon-forward-1"> Enviar</i>
</button>
</div>
</form>
</div>
</div><!--Box Formulario-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Formulário.
.title-form h1 {
position: relative;
font-size:30px;
text-align:center;
line-height:1.5em;
padding-bottom:45px;
font-family: "Open Sans", sans;
text-transform:uppercase;
letter-spacing: 6px;
color:#ffffff;
}
.title-form h1:before {
position: absolute;
left: 0;
bottom: 20px;
width: 60%;
left:50%;
margin-left:-30%;
height: 1px;
content: "";
background-color: #ffffff;
z-index: 4;
}
.title-form h1:after {
position: absolute;
width: 80px;
height: 45px;
left: 45%;
margin-left: -20px;
bottom: 0px;
font-family: "untitled-font-1";
content: '\e037';
font-size: 30px;
line-height: 40px;
color: #fff;
font-weight: 400;
z-index: 5;
display: block;
background-color: #7bd7fc;
}
.box-formulario {
width: 100%;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: #7bd7fc;
padding:60px 0;
}
.formulario {
width: 700px;
background: #7bd7fc;
padding: 60px 5%;
text-align: center;
}
.formulario span {
position: relative;
display: flex;
margin: 50px 10px;
}
/*input Animado*/
.input-balao-up {
display: inline-block;
width: 100%;
padding: 15px 0 10px 50px;
font-family: "Open Sans", sans;
font-weight: 400;
color: #4C4C4C;
background: #ffffff;
border: 0;
border-radius: 50px;
outline: 0;
transition: all .3s ease-in-out;
box-shadow: 0 13px 8px -8px rgba(0, 0, 0, 0.5);
}
.input-balao-up::-webkit-input-placeholder {
color: #00B6FF;
font-weight: 300;
}
.input-balao-up + label {
display: inline-block;
position: absolute;
top: 8px;
left: 0;
bottom: 8px;
padding: 0px 20px;
color: #00B6FF;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
transition: all .3s ease-in-out;
border-radius: 30px;
background: rgba(122, 184, 147, 0);
height: 33px;
line-height: 36px;
}
.input-balao-up + label:after {
position: absolute;
content: "";
width: 0;
height: 0;
top: 100%;
left: 50%;
margin-left: -2px;
border-left: 10px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid rgba(122, 184, 147, 0);
transition: all .3s ease-in-out;
}
.input-balao-up:focus,
.input-balao-up:active {
color: #ffffff;
padding: 15px 0 10px 25px;
background: #00b6ff;
}
.input-balao-up:focus::-webkit-input-placeholder,
.input-balao-up:active::-webkit-input-placeholder {
color: #ffffff;
}
.input-balao-up:focus + label,
.input-balao-up:active + label {
color: #fff;
background: #00B6FF;
left: -32px;
transform: translateY(-52px);
}
.input-balao-up:focus + label:after,
.input-balao-up:active + label:after {
border-top: 6px solid #00B6FF;
}
/*TextArea*/
.textarea-balao-up {
display: inline-block;
width: 100%;
height: 80px;
resize: none;
padding: 15px 0 10px 50px;
font-family: "Open Sans", sans;
font-weight: 400;
color: #4C4C4C;
background: #ffffff;
border: 0;
border-radius: 50px;
outline: 0;
transition: all .3s ease-in-out;
box-shadow: 0 13px 8px -8px rgba(0, 0, 0, 0.5);
}
.textarea-balao-up::-webkit-input-placeholder {
color: #00B6FF;
font-weight: 300;
}
.textarea-balao-up + label {
display: inline-block;
position: absolute;
top: 8px;
left: 0;
bottom: 8px;
padding: 0px 20px;
color: #00B6FF;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
transition: all .3s ease-in-out;
border-radius: 30px;
background: rgba(122, 184, 147, 0);
height: 33px;
line-height: 36px;
}
.textarea-balao-up + label:after {
position: absolute;
content: "";
width: 0;
height: 0;
top: 100%;
left: 50%;
margin-left: -2px;
border-left: 10px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid rgba(122, 184, 147, 0);
transition: all .3s ease-in-out;
}
.textarea-balao-up:focus,
.textarea-balao-up:active {
color: #ffffff;
padding: 15px 0 10px 25px;
background: #00b6ff;
}
.textarea-balao-up:focus::-webkit-input-placeholder,
.textarea-balao-up:active::-webkit-input-placeholder {
color: #ffffff;
}
.textarea-balao-up:focus + label,
.textarea-balao-up:active + label {
color: #fff;
background: #00B6FF;
left: -32px;
transform: translateY(-52px);
}
.textarea-balao-up:focus + label:after,
.textarea-balao-up:active + label:after {
border-top: 6px solid #00B6FF;
}
/*Botão*/
.box-btn {
width: 100%;
padding: 0 10px;
float: left;
}
.btn-envia {
padding: 0.7em 2em;
cursor: pointer;
border: none;
background: linear-gradient(90deg, #06B8FF 0%, #006DE1 100%);
box-shadow: 0 10px 8px -8px rgba(0, 0, 0, 0.5)!important;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
color: #fff;
border-radius: 50px;
}
.zoom-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
}
.zoom-shadow:hover, .zoom-shadow:focus, .zoom-shadow:active {
box-shadow: 0 13px 8px -8px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Formulário html com inputs Animado com css Efeito Balão UP
Veja o Resultado baixo!
Deixe um comentário