How to stop buttons from staying depressed with Bootstrap 3

Question

How do you make a button in Bootstrap 3 undepress automatically after being clicked?

To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

Load the page and click on one of the buttons. It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).

Inspecting the input element while clicked and unclicked doesn't show any additional classes being attached and removed from it.

Here's an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/

Answer 1

In your example, the buttons do not stay depressed. They stay focused. If you want to see the difference, do the following:

1. Click and hold on a button.
2. Release. You will see that when you release the mouse the button's appearance changes slightly, because it is no longer pressed.

If you do not want your buttons to stay focused after being released you can instruct the browser to take the focus out of them whenever you release the mouse.

Example

This example uses jQuery but you can achieve the same effect with vanilla JavaScript.

$(".btn").mouseup(function(){
    $(this).blur();
})

Fiddle

Answer 2

Or you can just use an anchor tag which can be styled exactly the same, but since it's not a form element it doesn't retain focus:

<a href="#" role="button" class="btn btn-default">one</a>.

See the Anchor element section here: http://getbootstrap.com/css/#buttons

Answer 3

The button remains focused. To remove this efficiently you can add this query code to your project.

$(document).ready(function () {
  $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
});

This also works for anchor links

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});

Answer 4

Or angular way:

function blurElemDirective() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);

Replace _MORE_ELEMENT_ with your others elements.

Or attribute way:

function blurElemDirective() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('blurMe', blurElemDirective);

Then add the attribute to your html element: blur-me

<button blur-me></button>

Answer 5

My preference:

<button onmousedown="event.preventDefault()" class="btn">Calculate</button>

Answer 6

This has to do with the :active and :focus element states. You need to modify the styles for those states for these buttons. For example, for the default button:

.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #fff;
}

Answer 7

It's the browser's focus since it's a form element (input). You can easily remove the focusing with a little css

input:focus {
    outline: 0;
}

Here's the fiddle with your example: http://jsfiddle.net/52VtD/5167/

EDIT

Ah, I just saw now that the colour of the button itself changes too. Bootstrap changes the button of e.g. your btn-default button with this css:

.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

If you don't want this behaviour, just overwrite it with your css.