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:

How do I stop the shadow when button is disabled?
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.

to clarify over what @Pete said, use `.btn:disabled:hover` instead of `.btn.disabled:hover` — Logar, Jul 06 '18 at 08:27

score 3 · Accepted Answer · edited Jul 11 '18 at 06:26

3

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

edited Jul 11 '18 at 06:26

MarmiK

5,639
6
40
49

answered Jul 06 '18 at 08:38

Nir Berko

1,368
1
13
33

score 1 · Answer 2 · edited Jul 11 '18 at 07:08

1

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

edited Jul 11 '18 at 07:08

answered Jul 06 '18 at 08:32

Korah Babu Varghese

47
7

1

It somehow looks like a hack to me and I like the first solution much better. Thanks for your help anyway. – Jul 06 '18 at 08:49

score 0 · Answer 3 · answered Jul 06 '18 at 08:42

0

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.

answered Jul 06 '18 at 08:42

wscourge

10,657
14
59
80

Thank you for the w3schools link, it helps. Next time I'll try contacting you directly about small thing like this one, is it OK? – Jul 06 '18 at 08:48
I think I've got you one better - we have the whole subject covered on [our Fluent Kit support page](https://nespero.com/support/) - it says both when to use StackOverflow network and when to contact us directly. I hope it helps. – wscourge Jul 06 '18 at 08:55

Turn off shadow when hovering disabled button only

3 Answers3