title: Disabled hover effect when button is disabled
body: <p>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</p>
  
  <p>I want to create only one CSS class, <code>.button-disabled</code> 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)</p>
  
  <p>Note that I want this class to be applied on buttons with different background colors so I can't just add something like this:</p>
  
  <pre><code>.button-disabled:hover{
      background-color: /** Same as when not hovering **/
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="button button-blue"&gt;Enabled Button&lt;/button&gt;
  &lt;button class="button button-blue button-disabled" disabled&gt;Disabled Button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>