`.btn-link` shouldn't have a gradient when they're enabled
https://github.com/twbs/bootstrap/discussions/36998
Discussed inOriginally posted by jon48 August 21, 2022 Hello,
Following the buttons refactoring in v5.2, there is a change of default behaviour on the btn-link
buttons, which I find quite undesirable, and have not found a native way to neutralise.
Basically, from 5.2, all btn
buttons have a gradient defined, and applied when compiling with $enable-gradients: true;
. That was not the case in 5.1.3, so even if gradients were enabled, only the buttons with background (btn-primary
, btn-secondary
...) had the gradient and btn-link
was left with a "flat" design, which I think is more appropriate.
To reproduce the error, I have the minimal following code.
SCSS:
$enable-gradients: true;
@import "../node_modules/bootstrap/scss/bootstrap";
.testarea {
background-color: tan;
}
HTML:
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Bootstrap 5.2</h2>
<div class="testarea">
<button class="btn btn-dark m-2">Dark</button><br>
<button class="btn btn-link m-2">Link</button>
</div>
</div>
</div>
</div>
When running with Bootstrap 5.1.3, I get the following output (with gradient on Dark and no gradient on Link): When running with Bootstrap 5.2.0, I get the following output (with gradients on both Dark and Link) I have not found a flag in Bootstrap to restore the previous behaviour or apply the gradient more specifically, and could only think of applying the following in my custom SCSS after importing Bootstrap. Should I stick with this "hack" or raise an issue?
.btn-link {
background-image: none;
}