How to change styling on bootstrap button when save button is disabled? - html

Question

I am using btn-btn-primary class of bootstrap for button styling but i have issue when form is invalid button is disabled with light blue color and grayish background that is not making enough difference with when it is enabled. How can i change background color and font in both cases ?
main.html
<form name="createProcessFormName" id="createProcessForm" role="form" class="form-horizontal">
<div class="panel-body formHeight">
<!--<p class="text-danger" ng-show="createProcessFormName.$dirty && createProcessFormName.$invalid">{{validationMessage}}</p>-->
<div class="row">
<div class="form-group col-md-6 fieldHeight">
<label for="name" class="col-md-5 required">Business
Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="name"
ng-model="DTO.LongName" ng-model-options="{updateOn: 'blur'}"
placeholder="Name" maxlength="1024" name="Name"
required>
<p class="text-danger" ng-show="createProcessFormName.processName.$touched && createProcessFormName.processName.$error.required">Business Process Name is required</p>
</div>
</div>
</div>
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>

Answer 1

I suggest use ng-class https://docs.angularjs.org/api/ng/directive/ngClass
which will add css class based on condtion.
When createFormName.$invalid is true, it will apply invalidCssClassName
from your css.
When createFormName.$invalid is false, it will remove invalidCssClassName
from your css.
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-class="{invalidCssClassName:createFormName.$invalid}" ng-click="submit()">Save</button>

Answer 2

Your best alternative would be to use the :invalid pseudo-class.
Once the form has all the required fields filled out, the form will no longer be invalid and therefore the button should go back to its normal state.
form + button.btn.btn-primary {
background: blue;
}
form:invalid + button.btn.btn-primary {
background: red;
}
<form>
<input type="text" required />
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>