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?