Bootstrap 5 button color change

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:

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;
}

Video explanation for Bootstrap button color change: