cssbuttonfluent-designfluent-kit

Turn off shadow when hovering disabled button only

I am creating buttons using Bootstrap button generator. Those are fluent design buttons and I noticed that when :disabled the button still casts shadow on :hover.

My questions:

  1. How do I stop the shadow when button is disabled?
  2. Is it OK to do that? It seems to be good choice to me, but is it somewhere documented for Fluent Design buttons?

I tried:

.btn.disabled:hover { box-shadow: none; }

but it doesn't work.

Solution

  • This should do the work, you just forgot to use a colon : for :disabled instead of dot . which means CSS pseudo class.

    .btn:disabled:hover{
    box-shadow: none;
}