Ao clicar no botão aparece uma sombra cinza na parte superior, criando um efeito meio que 3d, porém eu quero remove-lo.
Como eu quero que fique ao clicar:

[![inserir a descrição da imagem aqui][1]][1]


Como está:

[![inserir a descrição da imagem aqui][2]][2]


  [1]: https://i.sstatic.net/ZHoqg.png
  [2]: https://i.sstatic.net/ATxdq.png

Meu HTML:

      <div class="container">
        <div class="row">
            <div class="col-sm-4 col-sm-offset-8">
                <div class="buscador">
                  <form role="search">
                	   <div class="input-group">
            			        <input type="text" class="form-control" placeholder="Procurar">
            			        <div class="input-group-btn">
            				            <button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
            			        </div>
            		    </div>
            		</form>
                </div>
            </div>
    	    </div>
        </div>


Meu CSS até o momento:

    .buscador button{
      background: #ffffff;
      border-left: none;
      border-color: #ccc;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
    }
    .buscador button:hover,
    .buscador button:focus{
      background-color: #ffffff !important;
      border-color: #ccc !important;
      outline: 0 !important;
    }

Se vocês observarem bem vão reparar que o input tbm tem essa sombra interior no topo mais fraca e somente como placeholder e no button não tem  a não ser quando clica. Também quero remover essa borda da esquerda ao clicar. Como faço?