Move transparent background to .btn and remove background-image

[MartijnCuppens]

Closes #27002

• Moved transparent background to .btn
• Removed background-image: none; from the button-outline-variant mixin. Buttons and links don't have a background image by default, I guess this was a line to override the gradient backgrounds in the past.

[MartijnCuppens]

I've also set the color and hover color to $body-color. This makes a.btn and button.btn render exactly the same.

[andresgalante]

@MartijnCuppens just a question, is the color definition a fallback for cases when .btn is used without a modifier?

[MartijnCuppens]

@andresgalante, yes.

And if a developer wants to extend the .btn functionality with their own modifying classes, they can trust that their buttons will render the same for <a> and <button>.

[mdo]

I believe the background-image: none was for overriding some browser defaults on the button. I can't recall which browser or version, but I recall having to set this in order for custom backgrounds to work properly. Looking around, seems fine now.

[mdo]

Ah, yes:

bootstrap/less/buttons.less

Line 17 in 2c2ac33

background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

And it looks like it was then removed in Android Firefox, so safe to ship I think. necolas/normalize.css#214 (comment)

[XhmikosR]

Yeah, but do we support such old versions anymore? I too remember this issue but it was very old.

[MartijnCuppens]

The .btn elements don't have a background-image either, that's why I assumed it was save to remove this.

[shanehoban]

The default .btn background color was actually quite nice in my opinion, and I was using it over btn-secondary (too harsh). I've lost this after moving to 4.2.1 😢

Would definitely like to see the .btn default background color come back (although I've just edited my bootstrap to counter this).

#ececec, with #d8d8d8 on hover is nice.

[MartijnCuppens]

@shanehoban you shouldn't use .btn without modifier classes. We did this because the backgrounds of a.btn and button.btn weren't the same and that could lead inconsistencies when the buttons are extended. Best solution probably is to use the button-variant() mixin to generate a custom button.