CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
serah
serah

Reputation: 2117

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

  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>

Upvotes: 0

Views: 4486

Answers (3)

MEDER aka
MEDER aka

Reputation: 1

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

Upvotes: 0

Matthew Cawley
Matthew Cawley

Reputation: 2818

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;
}

Upvotes: 0

Dmytro Zaverukha
Dmytro Zaverukha

Reputation: 56

<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.

Upvotes: 1

Related Questions