title: Disable css hover effect when ng disabled is true for custom button
body: <p>I am try to disable custom <code>button</code> and disable(pointer) function is working fine.</p>
  
  <p>The problem is when we <code>hover</code> on the button, <code>hover</code> is still works. Hence I need to disable hover as well.</p>
  
  <p>I need to apply <code>ng-disable</code> for multiple custom <code>buttons</code> and I can not override css for every button.</p>
  
  <p><a href="http://jsfiddle.net/q8r4e/1389/" rel="nofollow">jsfiddle.net/q8r4e/1389/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;button class="bt1" ng-disabled="true" &gt;BUTTON&lt;/button&gt;
  &lt;button class="bt2" ng-disabled="true" &gt;BUTTON&lt;/button&gt;
  
  .bt1{
  background-color: #e38000;
      border: 0 none;
      border-radius: 15px;
      color: #ffffff;
      font-size: 14px;
      height: 30px;
      width: 135px;
  }
  .bt1:hover{
  background-color: #ffff00;
      color: #999;
  }
  
  .bt2{
  background-color: #33b3e3;
      border: 0 none;
      border-radius: 15px;
      color: #ffffff;
      font-size: 14px;
      height: 30px;
      width: 135px;
  }
  .bt2:hover{
  background-color: #a2ddf4;
      color: #999;
  }
  </code></pre>
  
  <p>Thank you in advance.</p>