Hover state stuck on buttons after click

Question

I have a form with two states: editing and visible. When you click an icon to edit the form two buttons (acting like submit) at the bottom appear to save or cancel. When I click them the form is updated (or cancelled) and the buttons disappear. The problem is when I re-open the form to edit it (and the buttons are visible again) the last one clicked still has it's hover state applied 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 here is just the cancel function...

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

Answer 1

As mentionned in an earlier comment (runTarm), this is because of 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 be more specific with your declaration because what I posted will override all the items with class btn-primary.

Hope this helps !