How to make sure pressed button remain "pressed down" - css

Question

I am using BootStrap Group Button class and found that in my own code, if a button is pressed down, the button will pop up back in a few seconds....
How can I make sure it remain pressed-down status?
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Stage of business:</label>
<br />
<div class="btn-group">
<button class="btn btn-default"><span class="glyphicon">Start-up</span>
</button>
<button class="btn btn-default"><span class="glyphicon">Growth Company</span>
</button>
<button class="btn btn-default"><span class="glyphicon">Mature Company</span>
</button>
</div>
</div>
</div>
Thank you.
Update
I added the active css and
I found that when I clicked the button the whole page gets refreshed so that's why the button loses active css class.
How to disable the submit action on these 3 button only? Coz I do have a button which is also in this form and it needs to trigger a submit action.
$('.btn-stage').click(function () {
$(this).toggleClass("active"); //addCss("active");
})
Update 3
Also, in this button group, only one button can be selected, if other button is selected, then the rest of buttons should bounce back.
Thank you.

Answer 1

Adding an active class to the button should keep it's 'pressed in' style.
$('.btn').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})
Hope that helps.

Answer 2

Demo
js
$('.Button').click(function() {
$(this).toggleClass("active");
});
css
.Button:active, .active {
background-color:red;
color: white;
}
html
<button class='Button'>Button</button>
Final Demo
js
$('.Button').click(function(e) {
$('.Button').not(this).removeClass('active');
$(this).toggleClass('active');
e.preventDefault();
});
html
<button class='Button'>Button</button>
<button class='Button'>Button</button>
<button class='Button'>Button</button>
css
.Button:active, .active {
background-color:red;
color: white;
}

Answer 3

add a class to define them lets say "nosubmit" like this :
<button class="btn btn-default nosubmit"><span class="glyphicon">Start-up</span>
</button>
<button class="btn btn-default nosubmit"><span class="glyphicon">Growth Company</span>
</button>
<button class="btn btn-default nosubmit"><span class="glyphicon">Mature Company</span>
</button>
then do this :
$('.nosubmit').click(function() {
$(this).addClass("active");
$('.nosubmit').unbind( "click" );// this will take off the click handler from all the nosubmit buttons
// if you want it to be to changed back whene you click again use toggleClass instead
return false;
});

Answer 4

Where did you put the buttons? Is it in form? I have no problem add/changing button's class into active if the buttons are not within the form tag. you can use:
$(document).ready(function(){
$('.btn-stage').click(function () {
$('.btn-stage.active').removeClass("active");
$(this).addClass("active");
})
});
but if it is in the form tag, you need to add type='button' to your button elements. so it looks like this
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Stage of business:</label>
<br />
<div class="btn-group">
<button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Start-up</span>
</button>
<button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Growth Company</span>
</button>
<button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Mature Company</span>
</button>
</div>
</div>
</div>
</div>
</form>
And the javascript above is still working. When you had a button within a form and you don't specify the type of its button, it will automatically set as type='submit'