CODEWITHSUNDEEP
css
Ali
Ali

Reputation: 22317

Hover and Active only when not disabled

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?

Upvotes: 338

Views: 330228

Answers (12)

Sylvio Ruiz Neto
Sylvio Ruiz Neto

Reputation: 192

Move the pseudo "disabled" to below or above all the others and add a "!important":

.element { color: red; cursor: pointer }
.element:focus{ color: green; }
.element:hover { color: blue; }
.element:active { color: black }
.element:disabled { color: gray !important; cursor: not-allowed !important }

The "!important" keyword will overwrite all previously declared properties.

Upvotes: 0

sai nath
sai nath

Reputation: 41

/* 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 */
}

Upvotes: 1

Paul Draper
Paul Draper

Reputation: 83205

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.)

  1. Negate a selector for disabled state.
button:not(:disabled) {
}
  1. 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.

Upvotes: 2

michai
michai

Reputation: 470

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)

Upvotes: 26

Kishor Neupane
Kishor Neupane

Reputation: 128

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

Upvotes: 4

Quang Dong
Quang Dong

Reputation: 497

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)

Upvotes: 0

fatlinesofcode
fatlinesofcode

Reputation: 1667

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

Upvotes: 32

jakeforaker
jakeforaker

Reputation: 1657

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

Upvotes: 18

Velayutham Anjamani
Velayutham Anjamani

Reputation: 1359

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

You can try this..

Upvotes: 135

Madef
Madef

Reputation: 619

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

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

Upvotes: 46

Engineer
Engineer

Reputation: 48793

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

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

Upvotes: 557

techfoobar
techfoobar

Reputation: 66663

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.

Upvotes: 3

Related Questions