Geek Answers Handbook

Actively changing the color of the Bootstrap Button

I use the bootstrap button class, or rather the following:

<button type="button" class="btn btn-success navbar-btn">Login</button>

Right now, the color shows green, which is good. Each time I press a button, the button goes into a dark shade of green. I want to make sure that the button does not change color, but remains only the color of the bootstrap, and also removes the blue outline around it.

For the blue outline, I tried to set the outline to none, but for some reason it didn't work. I know we should use

 .btn : active:focus { }

But I don’t know the default colors for the successful download button, so it’s hard for me to figure out how to do this.

+10
source share
2 answers

The btn-success color is # 5cb85c . All you have to do is check it with DevTools or search the load stylesheet to find all the rules related to this class and change everything you need in your own stylesheet to override them. There is no need to use !important at all, the specifics are your friend. See MDN Specification .

See a working snippet (this example changed all the states to the same base color as the example, and also removes the box-shadow property. You should be able to change everything you need from here.)

 .btn.btn-success { color: #fff; background-color: #5cb85c; border-color: #5cb85c; } .btn.btn-success.focus, .btn.btn-success:focus { color: #fff; background-color: #5cb85c; border-color: #5cb85c; outline: none; box-shadow: none; } .btn.btn-success:hover { color: #fff; background-color: #5cb85c; border-color: #5cb85c; outline: none; box-shadow: none; } .btn.btn-success.active, .btn.btn-success:active { color: #fff; background-color: #5cb85c; border-color: #5cb85c; outline: none; } .btn.btn-success.active.focus, .btn.btn-success.active:focus, .btn.btn-success.active:hover, .btn.btn-success:active.focus, .btn.btn-success:active:focus, .btn.btn-success:active:hover { color: #fff; background-color: #5cb85c; border-color: #5cb85c; outline: none; box-shadow: none; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> <button type="button" class="btn btn-success navbar-btn">Changed BTN</button> <button type="button" class="btn btn-info navbar-btn">Default BTN</button> </div> </div> </nav>
+8
source

I took the original style settings for btn-success and noticed that there are four colors. I extracted them and turned the shades. Then I replaced all the matching colors.

enter image description here

 /** Original colors =============== #28a745 #218838 <-- rgba(40, 167, 69, 0.5) #1e7e34 #1c7430 Updated colors =============== #8a458f #703975 <-- rgba(112, 57, 117, 0.5) #69346c #613064 */ 
 .btn.btn-success { color: #ffffff; background-color: #8a458f; border-color: #8a458f; } .btn.btn-success:hover { color: #ffffff; background-color: #703874; border-color: #69346d; } .btn.btn-success:focus, .btn.btn-success.focus { box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5); } .btn.btn-success.disabled, .btn.btn-success:disabled { color: #ffffff; background-color: #8a458f; border-color: #8a458f; } .btn.btn-success:not(:disabled):not(.disabled):active, .btn.btn-success:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #69346d; border-color: #613064; } .show > .btn.btn-success.dropdown-toggle { color: #ffffff; background-color: #69346d; border-color: #613064; } .show > .btn.btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5); } .btn.btn-success:not(:disabled):not(.disabled):active:focus, .btn.btn-success:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5); } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">NavBar</a> <button type="button" class="btn btn-success navbar-btn">Modified Button</button> <button type="button" class="btn btn-info navbar-btn">Regular Button</button> </div> </div> </nav>

Here is the SASS I redesigned.

 /** SASS */ $color-text: #ffffff $color-highlight: #8a458f $color-light: darken($color-highlight, 7.8%) // #703874 $color-dark: darken($color-highlight, 10.0%) // #69346d $color-shadow: darken($color-highlight, 12.5%) // #613064 $box-shadow: 0 0 0 0.2rem transparentize($color-light, 0.5) // rgba(112, 56, 116, 0.5) .btn.btn-success color: $color-text background-color: $color-highlight border-color: $color-highlight &:hover color: $color-text background-color: $color-light border-color: $color-dark &:focus, &.focus box-shadow: $box-shadow &.disabled, &:disabled color: $color-text background-color: $color-highlight border-color: $color-highlight &:not(:disabled):not(.disabled) &:active, &.active color: $color-text background-color: $color-dark border-color: $color-shadow .show >.btn.btn-success.dropdown-toggle color: $color-text background-color: $color-dark border-color: $color-shadow >.btn.btn-success.dropdown-toggle:focus box-shadow: $box-shadow .btn.btn-success:not(:disabled):not(.disabled) &:active:focus, &.active:focus box-shadow: $box-shadow
+2
source

More articles:


All Articles