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