Angular Js ng-disabled the color of the button stays the same whether it is enabled or disabled

Issue

I am using the angualar js ng-disable functionality to disable a button when it is appropriate. It is working fine but the user is having a hard time telling if the button is disabled or not since it not totally greyed out. If you hover the cursor over the button you can tell it is disable but the color of the button looks the same as if it were disabled. Is there a standard style to use that would be more obvious to the user when it becomes disabled. I have not worked with styles very much, so I apologize if it is something obviouse.

Solution

You can decrease the opacity of the button. Assuming button has a class of disableButton

Also you can add this class 'disableButton' in ng-class specifying the condition you gave for ng-disabled

For the button: (as per your comment)

<button data-ng-hide="isDisabled" type="button" ng-class="{'disableButton': isDisabled}" ng-disabled="isDisabled">Submit</button>

<img src="images/image_name.jpg" data-ng-show="isDisabled">

CSS: Also, if you do not want to use the image you can use below CSS to make it more better

.disableButton{
    opacity: 0.35; 
    background: #eee;
    color: #444;
}

Answered By - Rahul Arora