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 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
Customizing bootstrap 5 button colors and properties in it
"There must be a function to modify the text color according to the
color brightness in bootstrap."
Yes, it's using the WCAG 2.0 algorithm explained here. The red color you're using is just light enough to flip the text color to dark according to the WCAG algorithm.
Buttons are created by mixins (see: Buttons in the docs). In this case the 3rd parameter of the button-variant
mixin $color
is defined as:
$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio)
So the button's color is either $color-contrast-dark
or $color-contrast-light
, depending on the WCAG 2.0 calculation using the $min-contrast-ratio
.
Therefore, making the custom red color color slightly darker will flip the text color to white...
$primary: #d73b11;
@import "bootstrap";
Or, you can use the original custom color and force white bold text on btn-primary
like this...
$primary: #e84c22;
@import "bootstrap";
.btn-primary {
color: #fff;
font-weight: bold;
}
Demo
Or,
You can set a lower value on the $min-contrast-ratio
variable (3, 4.5, and 7 are the acceptable values) as shown in this answer
Also note that the way you're re-defining the theme-color map is wiping out all the other theme colors. You only need to change the value of $primary to change the primary theme color.
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>
How to change the color of a button on Bootstrap and Angular
Using [class]
In template:
[class.success]="otp?.length === 2"
In stylesheet:
.success{
background-color: blue;
}
Using [ngClass]
In template:
[ngClass]="{ blue: otp?.length === 2 }"
[ngClass]="getClass()"
In component.ts:
getClass() {
const isLongEnough = otp?.length === 2
return { success: isLongEnough }
}
Or:
getClass() {
if(otp?.length === 2)
return 'blue'
return ''
}
Or:
getClass() {
if(otp?.length === 2)
return ['blue']
return []
}
Using [style]
In template:
[style.color]="'blue'"
Using [ngStyle]
In template:
[ngStyle]="{ 'background-color': otp?.length === 2 ? 'blue' : 'red' }"
[ngStyle]="getStyle()"
In component.ts:
getStyle() : any {
if(otp?.length === 2)
return { 'background-color': 'blue' }
return {}
}
Can I change Bootstrap button color?
You need to override your css so you can change the background to black. A simple way to do this is to create a custom css class (you can either put this in a <style type="text/css">
tag in your HTML or put this in a separate CSS file)
.black-background {background-color:#000000;}
.white {color:#ffffff;}
Then, give your button these classes
<input type="submit" class="btn btn-primary black-background white" value="Text" />
Related Topics
Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px
Can It Flexbox? Chat Window with Input at the Bottom, Chats Scrolling Up
How to Change Inline Text Height, Not Just the Line-Height
Cypress Testing Pseudo CSS Class :Before
CSS 100 Percent Height Body and Element
When a CSS Property Can Have Multiple Values, Are Those Values Always Separated by Whitespaces
What Is the Meaning of the "@Include" in .CSS Files
CSS Child VS Descendent Selector
Associating Multiple Selectors with a Pseudo-Class
How to Add Background Colour to Group Layout in Javafx
How to Toggle Two CSS ':Checked' Pseudo-Classes with One Click
Absolute Positioning and Its Parent Element
What Does "A" Stand for in Font: 0/0 A;
Imitate Photoshop Blend Effects Like Multiply, Overlay etc
Why 'Float:Left' Doesn't Work with a Fixed Width
Css: Semi-Transparent Background and an Image