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?

Answer 1

You can use :enabled pseudo-class, but notice IE<9 does not support it:

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

Answer 2

.button:active:hover:not([disabled]) {
    /*your styles*/
}

You can try this..

Answer 3

Why not using attribute "disabled" in css. This must works on all browsers.

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

Answer 4

If you are using LESS or Sass, You can try this:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

Answer 5

Use the lightest touch: overriding via rule order.

.btn {
  /* base styles */
}

.btn:hover {
  color: red;
}

.btn:active {
  color: green;
}

.btn:disabled {
  color: #aaa;
}

The trick is the order -- apply all the non-disabled states first, makes sure they all have the same specificity, and do disabled last, with the same specificity.

This won't work for a "disabled" class added to links, or non-interactive elements, which don't have the disabled property.

(Edited to remove higher-specificity rules, and messing with pointer-events)

Answer 6

In sass (scss):

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

Answer 7

I was too searching for it when I got one of the simplest methods.

For Pure CSS:

.button {
  background-color: #222222;
  color: #ffffff;
}

.button:hover {
  background-color: #111111;
}

.button:active {
  background-color: #000000;
}

.button:disabled {
  opacity: 0.5;
}

.button:disabled:hover {
  /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
  background-color: #222222;
  color: #ffffff;
}

For SCSS:

.button{
  background-color: #222222;
  color: ffffff;
  &:hover{
    background: #111111;
  }
  &:active{
    background: #000000;
  }
  &:disabled{
    opacity: 0.5;
    &:hover{
      /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
      background-color: #222222;
      color: #ffffff;
    }
  }
}

Answer 8

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.

Answer 9

Options:

1. Add a selector for enabled state.

button:enabled {
}

This requires the element actually have an enabled state. (Buttons do, a div would not.)

2. Negate a selector for disabled state.

button:not(:disabled) {
}

3. Disable point events.

button:disabled {
  pointer-events: none;
}

I like this last approach as it can be applied to many styles, and I have never found it to be a problem.

Answer 10

/* Styles for the disabled state */
.customButton:disabled,
.customButton[disabled] {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed; /* Optional: Show a "not-allowed" cursor for better visual feedback */
}

.customButton:disabled:hover,
.customButton[disabled]:hover {
  /* You can optionally add different styles for the disabled button when hovered */
}

Answer 11

I use the one below in my project.

.bg-brand-3 {
  background-color: black;
  &[type="button"]:enabled {
    &:hover {
      background-color: orange;
    }
    &:active {
      background-color: green;
    }
  }
  &[type="submit"] {
    // css
  }
}

The :enable has the same meaning as :not(:disabled)