My goal is to disable custom buttons, and the disable(pointer) function is working correctly.
The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well.
I am looking to apply ng-disable for multiple custom buttons, without having to override the CSS for every single one.
Check out this jsFiddle for more information.
Here is the code snippet:
<button class="bt1" ng-disabled="true">BUTTON</button>
<button class="bt2" ng-disabled="true">BUTTON</button>
.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;
}
Thank you for your assistance.