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 button active color in bootstrap 4
you have to overwrite .btn-primary:not(:disabled):not(.disabled):active{
inspect the element and in the dev tool, click on toggle pseudo class
then check active
to see what rules are applied when the button is active, you'll see if your rules are overwritten or what you have to overwrite.
couldn't get it to work in the snippet , here's a fiddle : https://jsfiddle.net/takius/h9sj80kx/14/
EDIT : ( based on the comment )
to change the blue shadow, it's in : .btn-primary:not(:disabled):not(.disabled):focus{
updated fiddle : https://jsfiddle.net/takius/h9sj80kx/32/
How to change the button color when it is active using bootstrap?
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
button:active{
background:olive;
}
and
button:focus{
background:olive;
}
JsFiddle Example
P.S.: Please don't give the number in Id
attribute of html elements.
Bootstrap button custom active color
Twitter's Bootstrap provides a Button Generator, take a look into the generator, maybe you can change the generated CSS code to change to meet with your requirements:
http://twitterbootstrap3buttons.w3masters.nl/
Bootstrap 4: Buttongroup - change active color
If you apply data-toggle="button"
to the wrapper element the child buttons will automatically have .active
applied to whichever button is clicked.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="btn-group" role="group" data-toggle="button" aria-label="Basic example"> <button type="button" class="btn btn-outline-secondary">Left</button> <button type="button" class="btn btn-outline-secondary">Middle</button> <button type="button" class="btn btn-outline-secondary">Right</button></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
how to change bootstrap version 4 button color
2019 Update for Bootstrap 4.1+
Now that Bootstrap 4 uses SASS, you can easily change only the button color using the button-variant
mixins. Since you only want to change the primary button color, and not the entire primary theme color, you need to use the button-variant
mixins in SASS. You can set whatever $mynewcolor
and/or lighten()
and darken()
percentages you'd like.
$mynewcolor:teal;
.btn-primary {
@include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-primary {
@include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
https://www.codeply.com/go/f3uTwmsCVZ (SASS demo)
This SASS compiles into the following CSS...
.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.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 .2rem rgba(0,90,90,0.5)}
.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#009a9a;border-color:teal}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
https://www.codeply.com/go/l9UGO7J6V1 (CSS demo)
To change the primary color for all contextual classes (bg-primary, alert-primary, etc..) see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?
Also see:
https://stackoverflow.com/a/50973207/171456
How to theme bootstrap
Related Topics
CSSmin Not Correctly Handling @Import
Replace Background in Twitter Bootstrap Navbar for Ie
Mobile Website HTML Element Too Wide
Please Explain Rowspan and Colspan, Col and Colgroup
Apply CSS Properties When Transition Ends
Overriding CSS on Github Pages Using Slate Theme
Prevent Highlighter Cursor in CSS
How to Align Input and Label from Collection_Check_Boxes
Vertical Navigation with Rotated Text
Bootstrap Dropdown Menu Text Color
Sticky Mdtoolbar Inside Mdsidenavlayout
Vertically Center Div When Body Height: 100% Without Absolute Pos
Iis 7 Windows Server 2008/CSS File Not Loading Within Aspx
Putting an Image as a Frame Around an Iframe