Bootstrap toggle button - css if clicked

Question

I have the following toggle- button (bootstrap). Ich I click the button there is not a real difference of color - so its hard to see if the button is clicked or not. Is there a possibility to change it with css in that way that I can set e.g. the color of the clicked button?

<button type="button" class="btn btn-xs btn-info" data-toggle="button" ng-click="vm.changeAbsenceTrigger = !vm.changeAbsenceTrigger">
<span class="glyphicon glyphicon-pencil cursorPointer" aria-hidden="true"></span>
</button>

score 0 · Answer 1 · edited Mar 05 '18 at 05:56

First of all when I ran this in jsfiddle, the button does change colour and it obvious that it has been clicked.

However if you want to change the colour to something even more obvious, you can do this using the anchor tag instead of a button, and then style it using:

a:active{
  background-color:insert color here;
}

Otherwise, you will require javascript/jQuery. `

I recommend reading this question and its answers for more in depth options -> Pressed <button> CSS

Bootstrap toggle button - css if clicked

1 Answers1