Disabled buttons get colored on colorful background

[rr-it]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Bootstrap assumes buttons are only used on white/black/gray background.

The disabled-state of buttons is implemented using opacity: 0.65. Thereby disabled buttons are colored on colorful background.
E.g. a disabled red button on blue background becomes purple.

bootstrap/scss/_buttons.scss

Lines 112 to 122 in d2d4581

	&:disabled,
	&.disabled,
	fieldset:disabled & {
	color: var(--#{$prefix}btn-disabled-color);
	pointer-events: none;
	background-color: var(--#{$prefix}btn-disabled-bg);
	background-image: if($enable-gradients, none, null);
	border-color: var(--#{$prefix}btn-disabled-border-color);
	opacity: var(--#{$prefix}btn-disabled-opacity);
	@include box-shadow(none);
	}

Reduced test cases

https://codepen.io/rr-it/pen/LYoOKrx

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.3

[rr-it]

Related to #38455

[Nirmit4604]

Remove the opacity property for disabled buttons: This will ensure the button's background color remains consistent.
Adjust the color and background color directly: Set the color and background color explicitly for disabled buttons.

// _buttons.scss

.btn {
  // Your existing button styles here...

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    color: var(--#{$prefix}btn-disabled-color); // Define this variable or use a specific color
    pointer-events: none;
    background-color: var(--#{$prefix}btn-disabled-bg); // Define this variable or use a specific color
    background-image: if($enable-gradients, none, null);
    border-color: var(--#{$prefix}btn-disabled-border-color); // Define this variable or use a specific color
    // Remove the opacity property
    // opacity: var(--#{$prefix}btn-disabled-opacity); 
    @include box-shadow(none);
  }
}

// Define the variables if not already defined
$btn-disabled-color: #6c757d; // Example color, adjust as needed
$btn-disabled-bg: #e9ecef; // Example color, adjust as needed
$btn-disabled-border-color: #dee2e6; // Example color, adjust as needed

You can see the result by applying the changes in a live example. Copy the modified SCSS into the CSS section of the CodePen to see the effect on disabled buttons.

Custom SCSS File:

// _custom-buttons.scss

@import "path-to-bootstrap/scss/bootstrap"; // Import Bootstrap SCSS

.btn {
  // Existing button styles here...

  &:disabled,
  &.disabled,
  fieldset:disabled & {
    color: #6c757d; 
    pointer-events: none;
    background-color: #e9ecef; 
    background-image: if($enable-gradients, none, null);
    border-color: #dee2e6; 
    @include box-shadow(none);
  }
}

---

Edited by maintainer to apply Markdown code rendering and syntax highlightling

[rr-it]

@Nirmit4604 Thank you for looking into this.
Unfortunately I can't get your proposed code running. And the proposed code does not look like it would work as a general solution.
Please also have a look at #40559