Turn off shadow when hovering disabled button only

Question

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.

Answer 1

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;
}

Answer 2

Add pointer-events:none property to button disable CSS.

Because, default the button hover is written like that, we should add a custom CSS like this.

.btn:disabled{
    pointer-events: none;
}

/*****************OR***************************/

.btn:disabled {
    box-shadow: none !important;
}

Answer 3

As mentioned in the comment by @Pete, in order for your code to work, you need to use CSS special state selector, :disabled instead of the .disabled class.

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

Addressing the second question, is it Fluent Design specific? I don't believe it is - you will not find any plain guidelines for doing things with Fluent Design as of now (July 2018), only some general idea.

---

On the side, we will add the same styling to the Fluent Kit library itself, as it is oversight on our side, so with next releases you won't see shadow on the mentioned, disabled Bootstrap buttons.