Bootstrap Button on Click Showing Default Colour

bootstrap button on click showing default colour

The :active selector is what you need for the click.

.btn-sample:active {
// click styles here
}

It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow that is also applied to the active button state. Disable that like so:

.btn-sample:active {
box-shadow: none;
}

Edit:
The selector that is overriding your css is actually btn-success:active:focus. So you will need to add the following to your css:

.btn-success:active:focus {
color: #ffffff;
background-color: #161617;
border-color: #494F57;
}

Further to my comment below, you would be better off creating your own class such as btn-custom to which you can apply your desired styles. Combining this with the existing btn class, you can achieve your desired result with much less code as you won't need to override existing selectors.

Bootstrap 4 button pressed change color

You have to add !important to prevent override by bootstrap definition

.btn-outline-primary{  width: 220px;  background: #A4D555!important; /*2cc8df*/  border: none;  color: white;  font-weight:450;}
.btn-outline-primary:hover{ background: #A4D555!important; outline: none; box-shadow: none!important;}
.btn-outline-primary:focus{ background: #A4D555!important; outline: none; box-shadow: none !important;}
.btn-outline-primary:active{ background: #A4D555!important; outline: none; box-shadow: none !important;}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><button type="button" class="btn btn-outline-primary">Primary</button>

Change Bootstrap CSS for a button property after click

What you are missing is the :focus pseudo element and focus class, i.e.

.btn-primary:focus,
.btn-primary.focus, {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}

FYI, you have a few mistakes in your CSS: you are using ##EB984E (i.e. double #) in some rules instead of #EB984E.

Also FYI a few notes on how to style buttons for usability and accessibility:

  • you are using the same colour for hover - this should be a different colour to indicate that the button is active and ready to be clicked.
  • You also use the same colour for the focus outline - this outline is used to show which button has focus when the site is being used with a keyboard. It is usually a different colour to highlight this, although as long as it's clear which has focus its ok.

Now, your code working the way you want (but I highly recommend you consider the above points for your live site) :)

.buttoncontainer {
padding: 20px;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<style>
.btn:focus,
.btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem #EB984E;
}

.btn-primary {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}

.btn-primary:focus,
.btn-primary.focus {
box-shadow: 0 0 0 0.2rem #EB984E;
}

.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #EB984E;
border-color: #EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem #EB984E;
}

.buttons input:focus {
outline: none;
}
</style>

<div class="buttoncontainer">
<button class="btn btn-primary">One </button>
<button class="btn btn-primary">Two</button>
<button class="btn btn-primary">Three</button>
</div>

Changing the Color of button on Click in bootstrap

See this functional example:

$("button").click(function(){  $("button").removeClass("active");  $(this).addClass("active");});
.active {  background-color: green !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Unitss </button>            <button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>            <button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>            <button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>

Bootstrap outline buttons - keep background color when clicked

Add this code for the focused-clicked buttons

button:focus{  color: #fff;    background-color: #343a40;    border-color: #343a40;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" data-toggle="buttons"> <button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">  btn1 </button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false"> btn2 </button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false"> btn3 </button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false"> btn4 </button></div>

How to change btn color in Bootstrap

The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).

A better way might be to:

  1. Create your own customized version of Bootstrap using Bootstrap's online customization tool
  2. Manually create your own color class, e.g. .btn-whatever
  3. Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever

How to change color of a button when clicked using bootstrap?

Without posting any code the best I can do for you right now if give you a simple JQuery function to change a button's color by switching classes.

JS:

// .btn is the class of the element you want to change color
$(".btn").click(function() {
// Instead of directly editing CSS, toggle a class
$(this).toggleClass("clicked");
});

CSS:

.btn {
background-color: red;
}

.clicked {
background-color: blue;
}

EDIT: As ashin999 said, you actually have pre-defined classes in bootstrap (as you probably know) to change button stylizations. So you could toggle one of those classes instead of a new clicked class.



Related Topics



Leave a reply



Submit