Carregando...

Formulário html com inputs Animado com css Efeito swing Down

Postado: 26 de março de 2023 Tempo de Leitura: 4 Minutos

Formulário html com inputs Animado com css Efeito swing Down

Neste tutorial vamos criar um  Formulário de contato com os inputs html animado com css com efeito Slide Hidden

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="thirteen">
              <h1>Fale conosco</h1>
            </div>

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

                <span>
                    <input type="text" class="input-swing-down" 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-swing-down" 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-swing-down" 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-swing-down" 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-3d">
                        <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.

.thirteen h1 {

  position: relative;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  width: 215px;
  text-align: center;
  margin: auto;
  white-space: nowrap;
  border: 2px solid #dbdbdb;
  color: #dbdbdb;
  padding: 5px 11px 3px 11px;
  border-radius: 3px;

}

.thirteen h1:before, .thirteen h1:after {

    background-color:transparent;
    color: #dbdbdb;
    position: absolute;
    font-family: "untitled-font-1";
    content: '\e42c';
    height: 20px;
    width: 20px;
    bottom: 8px;
    line-height: 20px;
    font-size: 15px;

}

.thirteen h1:before {
   left:-30px;
}

.thirteen h1:after {
   right:-30px;
}

.box-formulario {

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

}

.formulario {

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

}


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

}

/*input Animado*/

.input-swing-down {

  display: inline-block;
  width: 100%;
  height: 41px;
  padding: 10px 0 10px 70px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  font-size: 1em;
  color: #575F60;
  background: #dbdbdb;
  border: 0;
  border-radius: 3px;
  outline: 0;
  transition: all .3s ease-in-out;

}

.input-swing-down::-webkit-input-placeholder {

  color: #575f60;
  font-weight: 300;

}

.input-swing-down + label {

  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 22px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  background: #8f9b9c;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transform-origin: 2px 2px;
  transform: rotate(0);
  animation: swing-back .4s 1 ease-in-out;

}

@keyframes swing {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(116deg);
  }
  40% {
    transform: rotate(60deg);
  }
  60% {
    transform: rotate(98deg);
  }
  80% {
    transform: rotate(76deg);
  }
  100% {
    transform: rotate(80deg);
  }
}
@keyframes swing-back {
  0% {
    transform: rotate(82deg);
  }
  100% {
    transform: rotate(0);
  }
}

.input-swing-down:focus,
.input-swing-down:active {

  color: #000000;
  padding: 10px 0 10px 30px;  
  background: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

}

.input-swing-down:focus::-webkit-input-placeholder,
.input-swing-down:active::-webkit-input-placeholder {

  color: #aaa;

}

.input-swing-down:focus + label,
.input-swing-down:active + label {

  animation: swing 1.4s 1 ease-in-out;
  transform: rotate(80deg);
  color: #fff;

}


/*TextArea*/

.textarea-swing-down {

  display: inline-block;
  width: 100%;
  height: 78px;
  padding: 10px 0 10px 70px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  font-size: 1em;
  resize: none;
  color: #575F60;
  background: #dbdbdb;
  border: 0;
  border-radius: 3px;
  outline: 0;
  transition: all .3s ease-in-out;

}

.textarea-swing-down::-webkit-input-placeholder {

  color: #575f60;
  font-weight: 300;

}

.textarea-swing-down + label {

  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 22px;
  height: 78px;
  line-height: 60px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  background: #8f9b9c;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transform-origin: 2px 2px;
  transform: rotate(0);
  animation: swing-back .4s 1 ease-in-out;

}

@keyframes swing {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(116deg);
  }
  40% {
    transform: rotate(60deg);
  }
  60% {
    transform: rotate(98deg);
  }
  80% {
    transform: rotate(76deg);
  }
  100% {
    transform: rotate(80deg);
  }
}
@keyframes swing-back {
  0% {
    transform: rotate(82deg);
  }
  100% {
    transform: rotate(0);
  }
}

.textarea-swing-down:focus,
.textarea-swing-down:active {

  color: #000000;
  padding: 10px 0 10px 30px;  
  background: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

}

.textarea-swing-down:focus::-webkit-input-placeholder,
.textarea-swing-down:active::-webkit-input-placeholder {

  color: #aaa;

}

.textarea-swing-down:focus + label,
.textarea-swing-down:active + label {

  animation: swing 1.4s 1 ease-in-out;
  transform: rotate(80deg);
  color: #fff;

}

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

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

}


.btn-3d {

  top: 0;
  left: 0;
  transition: all 0.15s linear 0s;
  display: block;
  margin: auto;
  width: 200px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  background-color: #8F9B9C;
  color: #090B0B;
  letter-spacing: 2px;
  box-shadow: -6px 6px 0 #393939;
  text-decoration: none;

}

.btn-3d:hover {
  top: 3px;
  left: -3px;
  box-shadow: -3px 3px 0 #393939;
}
.btn-3d:hover::after {
  top: 1px;
  left: -2px;
  width: 4px;
  height: 4px;
}
.btn-3d:hover::before {
  bottom: -2px;
  right: 1px;
  width: 4px;
  height: 4px;
}
.btn-3d::after {
  transition: all 0.15s linear 0s;
  content: "";
  position: absolute;
  top: 2px;
  left: -4px;
  width: 8px;
  height: 8px;
  background-color: #404040;
  transform: rotate(45deg);
  z-index: 1;
}
.btn-3d::before {
  transition: all 0.15s linear 0s;
  content: "";
  position: absolute;
  bottom: -4px;
  right: 2px;
  width: 8px;
  height: 8px;
  background-color: #404040;
  transform: rotate(45deg);
  z-index: 1;
}

.btn-3d {
  position: relative;
}

button:active.btn-3d {

  top: 6px;
  left: -6px;
  box-shadow: none;

}

button:active.btn-3d:before {
  bottom: 1px;
  right: 1px;
}
button:active.btn-3d:after {
  top: 1px;
  left: 1px;
}
button.btn-3d i { 

  display: block;
  background:#8F9B9C;
  font-family: 'open_sansregular';
  padding: 15px;
  z-index: 2;
  position: inherit;
  font-style: normal; 
  
}

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

Formulário html com inputs Animado com css Efeito swing Down

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

1.412 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