How to remove inner shadow from button or input

Clicking the button pops a gray shadow at the top, creating a 3d effect, but I want to remove it. How I want it to be clicked:

Howareyou?

MyHTML:

<divclass="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>

My CSS so far:

.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;
}

If you look closely you will notice that the input tbm has this inner shadow on the weakest top and only as a placeholder and on the button it has nothing to do except when you click. I also want to remove this border from the left when clicking. How do I?