Disable focus effect when not hovered

Viewed 1587

I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:

.some-company-control(@text-color, @hover-text-color) {
  color: @text-color;

  &:hover,
  &:active {
    color: @hover-text-color;
  }
}

The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.

Thanks everyone for any suggestions!

1 Answers
Related