Remove Button Shadow
Bootstrap 4.1 supports adding a class shadow-none to remove a shadow.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<p>Click both buttons below to see the difference:</p>
<button class="btn">Bootstrap button</button>
<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>UPDATE - Boostrap 4
In this version you can remove the button shadow by using utility class shadow-none.
.btn {
height: 100px;
width: 100px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-3">
<button class="btn shadow-none">No Shadow</button>
</div>
<div class="col-3">
<button class="btn shadow-sm">Shadow Small</button>
</div>
<div class="col-3">
<button class="btn shadow">Regular Shadow</button>
</div>
<div class="col-3">
<button class="btn shadow-lg">Shadow Large</button>
</div>
</div>
</div>See more info here
OLD Answer - Bootstrap 3
You were missing this:
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
outline: thin dotted;
outline-offset: -2px;
}
So you need to reset it. (!important only used for demo - DO NOT USE in your development code)
Snippet
.container-fluid {
text-align: center;
}
body .btn {
height: 170px;
width: 170px;
border-radius: 50% !important;
outline: 0 !important;
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
outline: 0 !important;
outline-offset: 0 !important;
background-image: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<p>result</p>
<div class="row">
<div class="col-sm-4">
<button class="btn">Rock</button>
</div>
<div class="col-sm-4">
<button class="btn">Paper</button>
</div>
<div class="col-sm-4">
<button class="btn">Scissors</button>
</div>
</div>
</div>bootstrap 4
in my case it was enough:
.btn:focus{
box-shadow: none !important;
}