- Página Inicial
- Códigos CSS Prontos
- Formulário de contato html css efeito slide Up
- Voltar
Formulário de contato html css efeito slide Up
Neste tutorial vamos criar um Formulário
de contato com os inputs html animado
com efeito SLIDE UP e no final vamos adicionar um Botão Pulse com Css.
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>Contato</h1> </div> <form action="#" method="post"> <span> <input type="text" class="input" id="nome" name="nome" placeholder="Nome" autocomplete="off" required=""/> <label for="nome"> <i class="icon icon-user-1"></i> </label> </span> <span> <input type="text" class="input" id="email" name="email" placeholder="E-mail" autocomplete="off" required=""/> <label for="email"> <i class="icon icon-mail-1"></i> </label> </span> <span> <input type="text" class="input" 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" id="mensagem" name="mensagem" rows="3" placeholder="Mensagem" autocomplete="off" required=""></textarea> <label for="mensagem"> <i class="icon icon-comment"></i> </label> </span> <div class="box-pulse"> <button type="submit" class="botao-pulse"><i class="icon icon-heart-3"></i> Enviar</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 { font-size: 1.7em; font-weight: 700; letter-spacing: 8px; text-transform: uppercase; width: 280px; color: #fff; text-align: left; margin: auto; padding-bottom: 13px; } .title-form h1:before { background-color: #ff0083; content: ''; display: block; height: 3px; width: 60%; margin-bottom: 5px; } .title-form h1:after { background-color: #ff0083; content: ''; display: block; position: relative; left: 0; bottom: 0; height: 3px; width: 20px; margin-top: 5px; } .box-formulario { width: 100%; align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-color: #312d2d; padding:60px 0; } .formulario { width: 700px; background: #312d2d; padding: 60px 5%; text-align: center; } .formulario span { position: relative; display: flex; margin: 45px 10px; } /*input Animado*/ .input { display: inline-block; width: 100%; padding: 10px 0 13px 58px; font-family: "Open Sans", sans; font-weight: 400; color: #312d2d; background: #ffffff; border: 0; border-radius: 3px; outline: 0; transition: all .3s ease-in-out; } .input::-webkit-input-placeholder { color: #312d2d; font-weight: 300; } .input + label { display: inline-block; position: absolute; transform: translateX(0); top: 0; left: 0; padding: 10px 15px; text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4); transition: all .3s ease-in-out; border-top-left-radius: 3px; border-bottom-left-radius: 3px; overflow: hidden; color: #fff; } .input + label:before, .input + label:after { content: ""; position: absolute; right: 0; left: 0; z-index: -1; transition: all .3s ease-in-out; } .input + label:before { top: 6px; left: 5px; right: 5px; bottom: 6px; background: #FF0083; } .input + label:after { top: 0; bottom: 0; background: #FF0083; } .input:focus, .input:active { color: #FF0083; padding: 10px 0 13px 10px; background: #fff; } .input:focus::-webkit-input-placeholder, .input:active::-webkit-input-placeholder { color: #312d2d; } .input:focus + label, .input:active + label { transform: translateY(-100%); padding: 10px 15px; } .input:focus + label:before, .input:active + label:before { border-radius: 5px; } .input:focus + label:after, .input:active + label:after { transform: translateY(100%); } /*TextArea*/ .textarea { display: inline-block; width: 100%; height: 87px; padding: 10px 0 13px 58px; font-family: "Open Sans", sans; font-weight: 400; color: #312d2d; background: #efefef; border: 0; border-radius: 3px; outline: 0; transition: all .3s ease-in-out; } .textarea::-webkit-input-placeholder { color: #312d2d; font-weight: 300; } .textarea + label { display: inline-block; position: absolute; transform: translateX(0); top: 0; left: 0; padding: 33px 15px; text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4); transition: all .3s ease-in-out; border-top-left-radius: 3px; border-bottom-left-radius: 3px; overflow: hidden; color: #fff; } .textarea + label:before, .textarea + label:after { content: ""; position: absolute; right: 0; left: 0; z-index: -1; transition: all .3s ease-in-out; } .textarea + label:before { top: 6px; left: 5px; right: 5px; bottom: 6px; background: #FF0083; } .textarea + label:after { top: 0; bottom: 0; background: #FF0083; } .textarea:focus, .textarea:active { color: #FF0083; padding: 10px 0 13px 10px; background: #fff; } .textarea:focus::-webkit-input-placeholder, .textarea:active::-webkit-input-placeholder { color: #312d2d; } .textarea:focus + label, .textarea:active + label { transform: translateY(-100%); padding: 10px 15px; } .textarea:focus + label:before, .textarea:active + label:before { border-radius: 5px; } .textarea:focus + label:after, .textarea:active + label:after { transform: translateY(100%); } /*Botão*/ .box-pulse { width:100%; width:250px; margin:0 auto; padding:0 30px; } .box-pulse { text-decoration:none; display: inline-block; font-family:Verdana, Geneva, sans-serif; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .botao-pulse { border: none; cursor: pointer; padding: 0.8em 2.2em; font-size: 1.2em; font-weight: bold; color: #fff; background-color: #ff0083; border-radius:3px; -webkit-animation: pulse 1s ease infinite; -moz-animation: pulse 1s ease infinite; -ms-animation: pulse 1s ease infinite; -o-animation: pulse 1s ease infinite; animation: pulse 1s ease infinite; } .botao-pulse:hover { color: #fff; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(1.1); } 50% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(1.1); } 50% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1); } } @-ms-keyframes pulse { 0% { -ms-transform: scale(1); } 25% { -ms-transform: scale(1.1); } 50% { -ms-transform: scale(1); } 100% { -ms-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(1.1); } 50% { -o-transform: scale(1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Formulário de contato html css efeito slide Up, e o botão de envio com a Função de Pulsar
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
498 Visualizações
Deixe um comentário