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:
- Create your own customized version of Bootstrap using Bootstrap's online customization tool
- Manually create your own color class, e.g.
.btn-whatever
- 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
CSS Ie8 Can't Style a List Element
How to Tell CSS: Not() Selector to Affect All Child Nodes
Break Long Word in a Div When Word-Wrap:Break-Word; Fails
Angular Materials Won't Apply Styles to Components
(CSS) How Position Text (With Background Color) Over <Img> Tag Without Absolute Positioning
How to Scroll a Div Content Between Another 2 Flex Divs
Loops Make Less to Run Out of Memory. (Structure Optimization)
How to Select from Only One Table with Web::Scraper
Style Button When: Active Different from: Hover
Change Text Color for Gtktoggletoolbutton in C Code (Gtk+3)
Make a Div Display Under Another Using CSS in a Totally Fluid Layout
How to Center Div in The Page? (Height & Width)
Grid Layout: Create CSS So Elements Keep Position When Adjacent Element Gets Resized