12

I'm using the bootstrap button class, more specifically the following :

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

Right now, the color is showing green which is fine. Every time I click the button, the button changes into a darkish shade of green. What I want is to make it so that the button does not change color but just remain the default bootstrap color and also, remove the blue outline around it.

For the blue outline, I attempted setting the outline to none but it didn't work for some reason. I know we have to use

.btn : active:focus {

}

But I don't know the default color of the bootstrap success button so I'm having difficulty in figuring it out.

4
  • To override Bootstrap's css, you have to call !important. Just make sure you won't need to override the class again before doing so. Dec 30, 2015 at 20:33
  • so for the outline I would have to do outline: none !important @DrewKennedy
    – halapgos1
    Dec 30, 2015 at 20:34
  • Give it a try and see what happens, then let us know. :) Dec 30, 2015 at 20:34
  • 1
    @DrewKennedy That's not necessarily true. Giving the CSS rule a higher specificity would override the default Bootstrap styling without the use of !important.
    – matt.
    Dec 31, 2015 at 0:34

3 Answers 3

17

The default color for btn-success is #5cb85c. All you have to do is inspect it with DevTools or search your bootstrap stylesheet to find all the rules that pertain to this class and change whatever you need in your own stylesheet to override them. No need to use !important at all, specificity is your friend. See MDN Specificity.

See working Snippet (This example changed all states to the same base color just as an example and also removes the box-shadow property as well. You should be able to change whatever 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>

3

I took the original style settings for the btn-success and noticed there are four colors. I extracted them and rotated the hues. I then replaced all of the corresponding 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 that I reverse-engineered.

/** 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
7
  • 1
    Thank you for this! The color pallet example really helped me organize my changes. Oct 3, 2019 at 17:51
  • 1
    @justiceorjustus Just got a notification, I updated this to use darken instead of "making up" color values. Oct 4, 2019 at 0:44
  • 1
    You are the man! I actually have about 3 different "styles" that I have to do and still haven't done them yet. This is seriously helpful. I hope everyone scrolls to this answer, instead, as I did. Oct 4, 2019 at 19:29
  • @Mr.Polywhirl, out of curiosity, how did you generate your shifted hues? For example, did you take the base color and shade it 10% each time? And did you use a tool like this, or did you calculate the colors yourself (if so, what were your calculations)? Thanks! Nov 9, 2020 at 16:46
  • @JoelBalmer it's been 2 years, but I think I just took all the colors from the source button and just rotated the hues. I then used GIMP to extract the hex values. Nov 9, 2020 at 16:56
1

I've been playing around with this and the other answers and in Bootstrap 4.3, this is all I had to do:

.btn.btn-primary:active:hover,
.btn.btn-primary:hover {
    border-color: $color-primary;
    background-color: $color-primary;
    // color: $color-primary;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.