Disabled hover effect when button is disabled

Question

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>

Answer 1

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.