I recently revamped the btn-default style in Bootstrap 3 by adding some SCSS code. When I apply this button directly on a page, it looks fine. However, when I use it inside a table or a card, all I see is the border and text with a transparent background and blue font color instead of black.
Here is the code snippet that I added:
.btn-default {
@extend .btn;
border-color: #BCBCBC;
}
This is how I implement it:
<button type="button" id="btnReset" class="btn-default btn-sm">
<span class="fas fa-sync-alt" aria-hidden="true"></span> Reset
</button>
UPDATE - SOLUTION
After considering the suggestions provided here, I made some adjustments to the code. While it's not an exact match to the original BS3 color, I decided to go for a slightly darker shade than what BS3 offers.
.btn-default {
$color-bg: #DCDCDC;
$color-border: #BCBCBC;
$hover-bg: #BFBFBF;
$active-bg: #BFBFBF;
@include button-variant( $color-bg, $color-border, $hover-bg, darken($color-border, 10%), $active-bg, darken($color-border, 12.5%) );
}