Campo de busca html css

Campo de busca html css

Neste tutorial vamos fazer um campo de busca com html e css com animação quando clicamos sobre a lupa. 

Nesta seção, projetaremos uma estrutura simples na tag <div>, <form>, <input> e a <button> para enviar quando clicado. 

Essas são as tags que usaremos para criar o nosso Campo de Busca.

Vamos Adicionar o HTML

 <div id="box-busca">
                  
   <form action="#" autocomplete="on">
                        
     <input class="campo-busca" id="busca" name="busca" type="text" placeholder="Faça sua Busca ?">
     <button type="submit" class="btn-busca"> <i class="icon icon-search"> </i> </button>
                  
   </form>
                
 </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Campo de Busca.

#box-busca {

    display: block;
    height: 50px;
    float: right;
    padding: 0;
    position: relative;

}

.campo-busca {


  font-size: 35px;
  display: inline-block;
  font-family: 'open_sansregular';
  font-weight: 100;
  border: none;
  outline: none;
  color: #ffffff;
  padding: 3px;
  padding-right: 50px;
  width: 0px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;

}

.campo-busca:focus {

    width: 600px;
    z-index: 1;
    cursor: text;
    background-color: #007cff;
    border-radius: 50px;
    padding: 0 25px;

}

.btn-busca {
  
    width: 50px;
    height: 50px;
    display: inline-block;
    color: white;
    font-size: 1.2em;
    float: right;
    border: none;
    border-radius: 50px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
    background: #4c4c4c;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando