I have successfully removed the outline for a single button, but I am struggling to remove it for a button within a btn-group class.
This is the HTML code I am working with:
<button class="btn btn-primary">Button without outline</button>
<hr />
<div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" id="option1" autocomplete="off"> Button with outline
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" id="option2" autocomplete="off"> Button with outline
</label>
</div>
And here is the CSS I'm using:
body {
margin: 1rem;
}
[class*="btn-"]:focus {
-webkit-box-shadow: none;
box-shadow: none
}