How to stop buttons from staying depressed with Bootstrap 3

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

My preference:

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

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

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();
  });
});