Change bootstrap button colour and class on click or on hover/focus

Question

1. I have four bootstrap buttons with btn-primary class set on them. On hover or focus I would like to change the color of the button to show that on hover or focus is happening.

2. On clicking a button I would like to set btn-danger bootstrap class. I already have an ng-click event attached to the buttons so not sure how I can get a handle to the button and change the css only on that button. The examples I have seen have a jquery click event handler but not sure if that is the best approach to take

Please can you advice how to go about the above two queries?

<div>
<br>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Update')">Update Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Activate')">Activation
    Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Deactivate')">Deactivation
    Requests
       </button>
</div>

Answer 1

<button type="button" class="btn" ng-class="{ 'btn-primary': !pendingReqCtrl.isButtonHover,  'someClass': pendingReqCtrl.isButtonHover, 'btn-danger': pendingReqCtrl.isClick" ng-mouseover="onMouseOver(true)" ng-mouseleave="onMouseOver(false)" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
   </button>

function onMouseOver(isHover){
    pendingReqCtrl.isButtonHover = isHover;
 }

function loadData(){
    pendingReqCtrl.isClick= true;
}

Try something like this.

Answer 2

As a best practice you should override bootstrap styles (rather than edit them directly). To override the bootstrap's btn-primary:hover styles, add this to your own custom stylesheet.

.btn-primary:hover {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #204d74;
}

and this to override the btn-primary:focus styles:

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #122b40;
}

Just make sure that your own stylesheet with these overrides comes after the bootstrap stylesheet.

UPDATE

To limit this to only those buttons you can give the surrounding div an id="myButtons" and then the css overrides can become

#myButtons .btn-primary:hover {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #204d74;
}

#myButtons .btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #122b40;
}

Answer 3

You can try this: give an id to the button that you want to change the css and then call it from your controller.

Suppose your button id is buttonId , then from the controller

document.getElementById('buttonId').style.color = 'blue'
document.getElementById('buttonId').style.width = value