Carregando...

Formulário html e css com Efeito Slide nos inputs

Postado: 27 de março de 2023

Formulário html e css com Efeito Slide nos inputs

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

1.891 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados