Bootstrap remove button click effect - css

Question

I have been trying to find the relevant css that I need to change in Bootstrap to prevent this effect on clicking a button (see attached image)
Any help would much most appreciated!
EDIT : Here is the relevant code :
<div class="btn-group" dropdown container="body">
<button dropdownToggle type="button" class="btn dropdownToggle" style="background-color:#337ab7;color:white;">
Views <span class="caret"></span>
</button>
</div>
EDIT 2 : I managed to remove the border with this code :
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
}
However, there is still an effect when I click on the button (see image below) :
Is it possible to also remove this?

Answer 1

You have to set .btn:focus {outline: 0;}. If you need to remove focus globally just use this :focus {outline: 0;}
For the second question just use
.btn.active,
.btn:active {
box-shadow: none;
}

Answer 2

Most likely the default outline, here's a generic dropdown example with bootstrap 3.3.7 without outline:
button:focus {
outline: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>

Answer 3

You may need to add a line of css that over-rides the bootstrap, like:
button {
border:0!important;
}

Answer 4

You will also have to remove the shadowing:
.btn.active, .btn:active {
-webkit-box-shadow: none;
box-shadow: none;
}