Hover and Active only when not disabled

Question

I use hover  active and disabled to style Buttons   But the problem is when the button is disabled the hover and active styles still applies   How to apply hover and active only on enabled buttons

User · Answer

One way is to add a partcular class while disabling buttons and overriding the hover and active states for that class in css  Or removing a class when disabling and specifying the hover and active pseudo properties on that class only in css  Either way  it likely cannot be done purely with css  you ll need to use a bit of js

User · Answer

A lower-specificity approach that works in most modern browsers  IE11   and excluding some mobile Opera  amp  IE browsers -- http   caniuse com  feat pointer-events     btn        base styles        btn disabled    opacity  0 4    cursor  default    pointer-events  none      btn hover     color  red      The pointer-events  none rule will disable hover  you won t need to raise specificity with a  btn disabled  hover selector to nullify the hover style    FYI  this is the simple HTML pointer-events  not the contentious abstracting-input-devices pointer-events

User · Answer

You can use  enabled pseudo-class  but notice IE lt 9 does not support it   button hover enabled        your styles     button active enabled        your styles

User · Answer

If you are using LESS or Sass   You can try this    btn      amp  disabled        opacity  0 6         amp  hover   amp  active        amp  not  disabled           background-color  darken  orange  15

User · Answer

button active hover not  disabled           your styles       You can try this

User · Answer

In sass  scss     button     color  white    cursor  pointer    border-radius  4px      amp  disabled      opacity  0 4        amp  hover        opacity  0 4     this is what you want               amp  hover      opacity  0 9

User · Answer

Why not using attribute  disabled  in css  This must works on all browsers   button disabled  hover       background  red    button hover       background  lime

[css] Hover and Active only when not disabled

Examples related to css