Formulário html e css com Efeito Slide nos inputs

Formulário html com inputs Animado com css Efeito Balão UP

Como criar uma barra de pesquisa em HTML

Postado: 27 de março de 2023 Tempo de Leitura: 3 Minutos

Neste tutorial vamos criar um Formulário html com os inputs animado com css quando clicamos no input.

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?

Modelos de formulários html

Podemos estilizar 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><i class="icon icon-comments-o"></i> Fale Conosco Agora</h1>
            </div>

            <form action="#" method="post">
                     

                <span>
                    <input type="text" class="input-slide" 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-slide" 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-slide" id="assunto" name="assunto" placeholder="Assunto" autocomplete="off" required=""/>
                    <label for="assunto"> <i class="icon icon-help"></i> </label>
                </span>

                <span>
                    <textarea type="text" class="textarea-slide" id="mensagem" name="mensagem" rows="3" placeholder="Mensagem" autocomplete="off" required=""></textarea>
                    <label for="mensagem"> <i class="icon icon-commenting-o"></i> </label>
                </span>

                <div class="box-btn">
                     
                    <button type="submit" class="btn-envia zoom-shadow">
                        <i class="icon icon-export"> 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 html.

.title-form h1 {

  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
  text-align: left;
  color: #4c4e4e;
  font-family: 'open_sansbold';
  margin-left: 10px;
  margin-bottom: 35px;

}

.title-form h1:before {

  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 5px;
  width: 55px;
  background-color: #4c4e4e;

}

.title-form h1:after {

  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 98%;
  background-color: #4c4e4e;

}

.box-formulario {

    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #ffdd58;
    padding:60px 0;

}

.formulario {

    width: 700px;
    background: #ffdd58;
    padding: 60px 5%;
    text-align: center;

}


.formulario span {
  position: relative;
  display: flex;
  margin: 15px 10px;

}

/*input Animado*/

.input-slide {

  position: relative;
  display: inline-block;
  width: 100%;
  padding: 10px 0 10px 75px;
  font-family: "Open Sans", sans;
  font-size: 23px;
  font-weight: 400;
  color: #d2d2d2;
  background: #ffffff;
  border: 0;
  border-radius: 3px;
  outline: 0;
  transition: all .3s ease-in-out;

}

.input-slide::-webkit-input-placeholder {

  color: #4c4e4e;
  font-weight: 300;

}

.input-slide + label {

  display: inline-block;
  position: absolute;
  transform: translateX(0);
  top: 0;
  left: 0;
  bottom: 0;
  padding: 7px 12px;
  font-size: 33px;
  font-weight: 700;
  text-transform: uppercase;
  border-right: 1px #ffdd58 solid;
  background: transparent;
  color: #d2d2d2;
  text-align: left;
  transition: all .3s ease-in-out, color .3s ease-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;

}

.input-slide + label:after {

  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
  background: #4c4e4e;
  z-index: -1;
  transform: translate(0);
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;

}

.input-slide:focus,
.input-slidev:active {
  
  color: #4c4e4e;
  background: #fff;
  padding: 10px 0 10px 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

}

.input-slide:focus::-webkit-input-placeholder,
.input-slide:active::-webkit-input-placeholder {

  color: #aaa;

}

.input-slide:focus + label,
.input-slide:active + label {

  color: #fff;
  transform: translateX(-100%);

}

.input-slide:focus + label:after,
.input-slide:active + label:after {
  
  background: #4c4e4e;
  transform: translate(100%);

}

/*TextArea*/

.textarea-slide {

  position: relative;
  display: inline-block;
  width: 100%;
  padding: 10px 0 10px 75px;
  font-family: "Open Sans", sans;
  font-size: 23px;
  font-weight: 400;
  color: #d2d2d2;
  background: #ffffff;
  border: 0;
  resize: none;
  border-radius: 3px;
  outline: 0;
  transition: all .3s ease-in-out;

}

.textarea-slide::-webkit-input-placeholder {

  color: #4c4e4e;
  font-weight: 300;

}

.textarea-slide + label {

  display: inline-block;
  position: absolute;
  transform: translateX(0);
  top: 0;
  left: 0;
  bottom: 0;
  padding: 7px 12px;
  font-size: 33px;
  font-weight: 700;
  text-transform: uppercase;
  border-right: 1px #ffdd58 solid;
  background: transparent;
  color: #d2d2d2;
  text-align: left;
  transition: all .3s ease-in-out, color .3s ease-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;

}

.textarea-slide + label:after {

  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
  background: #4c4e4e;
  z-index: -1;
  transform: translate(0);
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;

}

.textarea-slide:focus,
.textarea-slide:active {
  
  color: #4c4e4e;
  background: #fff;
  padding: 10px 0 10px 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

}

.textarea-slide:focus::-webkit-input-placeholder,
.textarea-slide:active::-webkit-input-placeholder {

  color: #aaa;

}

.textarea-slide:focus + label,
.textarea-slide:active + label {

  color: #fff;
  transform: translateX(-100%);

}

.textarea-slide:focus + label:after,
.textarea-slide:active + label:after {
  
  background: #4c4e4e;
  transform: translate(100%);

}

/*Botão*/
.box-btn { 

 width: 100%;
 padding: 0 10px;
 float: left;

}

.btn-envia {
  
  padding: 1em 2em;
  cursor: pointer;
  border: none;
  background-color: #4c4e4e;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  color: #fff;
  border-radius: 3px;
  width: 100%;

}

.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.05);
  transform: scale(1.05);

}

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Formulário html e css com Efeito Slide nos inputs

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

2.160 Visualizações

css,Formulário de Contato Templates Html,Formulários Html e Css Prontos,Html e css,Html form,Inputs Html,slideLeft

Formulário html e css com Efeito Slide nos inputs

Formulário html com inputs Animado com css Efeito Balão UP

Como criar uma barra de pesquisa em HTML

Deixe um comentário Cancelar resposta

Artigos Relacionados

120 Menus Responsivos em Css e Html Gratuitos

Modelo de formulário de contato pronto