.btn-link shouldn't have a gradient when they're enabled

[mdo]

Discussed in #36998

^{Originally 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;
}