CODEWITHSUNDEEP
htmlcss
dimlucas
dimlucas

Reputation: 5141

Disabled hover effect when button is disabled

I have created a set of buttons with different sizes, colors and effects, so there are green buttons, red buttons, e.t.c One of them is the blue button below. As you can see the background color changes to something darker on mouse hover

I want to create only one CSS class, .button-disabled that will make a button look like a disabled one. I am trying to figure out a way to remove the hover effect when the button is disabled (like the second button in the example below)

Note that I want this class to be applied on buttons with different background colors so I can't just add something like this:

.button-disabled:hover{
    background-color: /** Same as when not hovering **/
}


.button{
   text-decoration: none;
   border: none;
   padding: 12px 20px;
   cursor: pointer;
   outline: 0;
   display: inline-block;
   margin-right: 2px;  
   color: #ffffff;
   border-radius: 12px;
}

.button-blue{
    background-color: #3498db; 
}

.button-blue:hover{
    background-color: #2980b9; 
}

.button-blue:active{
    color: #3498db;
    background-color: #ffffff; 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2);
}

.button-disabled{
    opacity: 0.6;  
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Upvotes: 8

Views: 25393

Answers (4)

Aman Gupta
Aman Gupta

Reputation: 31

There is a very simple way for this. I dont know why have people complicated it.

Use the following:

button[disabled] { opacity:0.4; cursor : not-allowed !important; }

Upvotes: 3

Gokhan Kurt
Gokhan Kurt

Reputation: 8297

Use not selector along with attribute selector or class selector. Note that this will not work in IE8 and below.

.button{
   text-decoration: none;
   border: none;
   padding: 12px 20px;
   cursor: pointer;
   outline: 0;
   display: inline-block;
   margin-right: 2px;  
   color: #ffffff;
   border-radius: 12px;
}

.button-blue{
    background-color: #3498db; 
}

.button-blue:hover:not(.button-disabled){
    background-color: #2980b9; 
}

.button-blue:hover:not([disabled]){
    background-color: #2980b9; 
}

.button-blue:active{
    color: #3498db;
    background-color: #ffffff; 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2);
}

.button-disabled{
    opacity: 0.6;  
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Upvotes: 3

se0kjun
se0kjun

Reputation: 550

use not selector

.button{
   text-decoration: none;
   border: none;
   padding: 12px 20px;
   cursor: pointer;
   outline: 0;
   display: inline-block;
   margin-right: 2px;  
   color: #ffffff;
   border-radius: 12px;
}

.button-blue{
    background-color: #3498db; 
}

.button-blue:not(.button-disabled):hover{
    background-color: #2980b9; 
}

.button-blue:active{
    color: #3498db;
    background-color: #ffffff; 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2);
}

.button-disabled{
    opacity: 0.6;  
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

You can use pointer-events: none to make sure it doesn't do anything. This is the right way to block any hover effects or even click happening on the element:

.button {
  text-decoration: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  outline: 0;
  display: inline-block;
  margin-right: 2px;
  color: #ffffff;
  border-radius: 12px;
}
.button-blue {
  background-color: #3498db;
}
.button-blue:hover {
  background-color: #2980b9;
}
.button-blue:active {
  color: #3498db;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}
.button-disabled {
  opacity: 0.6;
  pointer-events: none;
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Since this works only for the new versions of browsers, it is always better to use the same colours, adding the :hover state as well:

.button {
  text-decoration: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  outline: 0;
  display: inline-block;
  margin-right: 2px;
  color: #ffffff;
  border-radius: 12px;
}
.button-blue {
  background-color: #3498db;
}
.button-blue:hover {
  background-color: #2980b9;
}
.button-blue:active {
  color: #3498db;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}
.button-blue.button-disabled:hover,
.button-disabled {
  opacity: 0.6;
  background-color: #3498db;
}
<button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

This would become a pain, when you have multiple classes defined, and you have to redefine the disabled class for each colour.

Upvotes: 23

Related Questions