Change Bootstrap Button Color

Bootstrap provides various colored buttons. But you might need custom button colors to match your theme. Here’s how you can change(override) the Bootstrap button colors.

Final Output:

1. Add your Bootstrap button.

<button type="button" class="btn btn-primary">Primary</button>

Output:

2. Remove the Bootstrap button color class(ex. btn-primary) and use btn class to override the button color. Set the custom background and font color.

.btn{
  background-color: teal;
  color: #fff;
}

Output:

3. Set the background and font color on the button hover as well. For a hover effect, I am swapping the colors.

.btn:hover{
  color: teal;
  background-color: #fff;
  border-color: teal;
}

Output:

4. For a smooth animation effect, let’s use a transition.

.btn {
  transition: all .7s;
}

Output:

Update:

You can also customize the Bootstrap buttons using Bootstrap’s evolving CSS variables approach. It might look daunting if you haven’t used CSS variables yet. But it’s quite simple.

For instance, to change the button background you can use the CSS variable –#{$prefix}btn-bg. The prefix by default is bs.

.btn{
  --bs-btn-bg: orange;
}

Final Output Code for Bootstrap button color change:

HTML:

<button type="button" class="btn">Subscribe</button>

CSS:

.btn {
  background-color: teal;
  color: #fff;
  transition: all .7s;
}
.btn:hover {
  color: teal;
  background-color: #fff;
  border-color: teal;
}