Hover state on buttons after clicking

Question

I have a form with two states: editing and visibility. When you click the icon to edit the form, the two buttons (acting as submit) at the bottom are displayed to save or cancel. When I click on them, the form is updated (or canceled) and the buttons disappear. The problem is that I reopen the form to edit it (and the buttons are visible again), the last one I clicked, it still has the freezing mode used in Chrome.

<div> <div class="col-xs-5"> <button class="btn btn-primary pull-right" ng-click="save(true)">Save</button> </div> <div class="col-xs-5 cancel-btn"> <button class="btn btn-primary pull-left" ng-click="cancel()">Cancel</button> </div> </div> 

For simplicity, just the undo function is here ...

  $scope.cancel = function() { //set a flag for angular to hide/show editing mode in HTML $scope.editMode = false; }; 

Answer 1

As mentioned in a previous comment (runTarm), this is due to the active / focused state of the buttons.

To change it:

 .btn-primary:active, .btn-primary:focus { // place your 'default' styling over here } 

You will probably need to clarify your declaration, because what I posted will override all elements with the btn-primary class.

Hope this helps!