How to prevent a disabled button from gray out when clicked

Question

How to prevent a disabled button from become gray out when mouse down over it ? it should change the color, what would be the css property to tackle this issue ?

This is the button on disabled state

And this is the button after click on it or press and hold mouse

this is the styles for the button

   .btn {
      border: 0;
      cursor: pointer;
      display: inline-block;
      font-family: "Myriad-Regular";
      line-height: 2rem;
      margin: 1rem 0;
      padding: 2.2rem;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      width: 100%;
    }
    
    .btn--primary {
      background: var(--color-primary);
      color: #fff;
    }
    
    .btn--primary:hover {
      background: #f79661;
    }
    
    .btn--primary:disabled {
      background: #f6c5ab;
    }

and this is the HTML markup

<button type="submit" class="btn btn--primary btn--small" disabled>Send</button>

I realized that the problem only happens on mobile platforms, i had chrome debugger in mobile device mode and also tested on my android Galaxy A42 and the problem persists

Thanks a lot in advance!

Combine selectors: `.btn--primary:disabled:hover` will select buttons that are disabled and hovered. — Heretic Monkey, May 09 '22 at 12:44
Does this answer your question? [Styling a disabled input with css only](https://stackoverflow.com/questions/18445543/styling-a-disabled-input-with-css-only) — Heretic Monkey, May 09 '22 at 12:46
Combining selectors as mentioned by Heretic and Alireza's answer with the "pointer-events: none;" property solves the problem... Thanks, everyone for your help! — Junior Silva, May 10 '22 at 11:52

score 1 · Answer 1 · answered May 09 '22 at 13:06

1

Works perfectly fine for me.
Edit your question to include your HTML

.btn {
  border: 0;
  cursor: pointer;
  display: inline-block;
  font-family: "Myriad-Regular";
  line-height: 2rem;
  margin: 1rem 0;
  padding: 2.2rem;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
}

.btn--primary {
  background: #f6c5ab;
  color: #fff;
}

.btn--primary:hover {
  background: #f79661;
}

.btn--primary:disabled {
  background: #f6c5ab;
}

<button class="btn btn--primary">Normal button</button>
<button class="btn btn--primary" disabled>Disabled button</button>

answered May 09 '22 at 13:06

Zach Jensz

3,650
5
15
30

Hi Zach, thanks for your answer. The fix haven't worked for mobile device screens. Thanks anyway! – Junior Silva May 10 '22 at 11:48
@JuniorSilva Do you have the proper [screen width meta tag](https://www.w3schools.com/css/css_rwd_viewport.asp)? – Zach Jensz May 10 '22 at 23:50
Hi Zach Jensz! Yes, i do. – Junior Silva Jun 15 '22 at 15:56

How to prevent a disabled button from gray out when clicked

1 Answers1