Behseini February 2016

Issue on Setting Bootstrap Active Button Background Color

Can you please take a look at this demo and let me know why I am not set the background color for active state of button in bootstrap 3? what I am expecting is setting the background color to red after the click which works until the mouse is over the button but as soon as the mouse leaves it changes to transparent again!

Thanks

.btn-sample
 {
  text-shadow: none;
  color: white;
  background:transparent;
  border:2px solid red;
  color:red;
}
.btn-sample:hover
 {
  text-shadow: none;
  color: white;
  background:red;
}
.btn-sample:active {
  box-shadow: none;
  background-color: red;
}
.btn-sample.active {
   background-color: red;
}
.btn-sample:active:focus {
  color: #ffffff; 
  background-color: red; 
}
.btn-sample.active:focus{
     background-color: red;
   }
.btn-sample:active:focus{
      background-color: red;
   }

Answers


Tricky12 February 2016

Bootstrap does not automatically attach the active class when you click a button. You need a bit of jQuery (or you could use javascript) to do it for you.

Try this:

$('.btn-sample').click(function() {
  $(this).toggleClass('active');
});

Updated your link here

Post Status

Asked in February 2016
Viewed 2,273 times
Voted 7
Answered 1 times

Search




Leave an answer