Creating a custom Bootstrap button class

As you may know Bootstrap comes with several styles of buttons or if you use a Bootswatch theme you can get many more styles. But in most cases you will want your own and here is how to style a Bootstrap button to your liking:

The CSS:

.btn-custom { 
  color: #ffffff; 
  background-color: #FF8103; 
  border-color: #000000; 
} 
 
.btn-custom:hover, 
.btn-custom:focus, 
.btn-custom:active, 
.btn-custom.active, 
.open .dropdown-toggle.btn-custom { 
  color: #ffffff; 
  background-color: #FFBE0D; 
  border-color: #000000; 
} 
 
.btn-custom:active, 
.btn-custom.active, 
.open .dropdown-toggle.btn-custom { 
  background-image: none; 
} 
 
.btn-custom.disabled, 
.btn-custom[disabled], 
fieldset[disabled] .btn-custom, 
.btn-custom.disabled:hover, 
.btn-custom[disabled]:hover, 
fieldset[disabled] .btn-custom:hover, 
.btn-custom.disabled:focus, 
.btn-custom[disabled]:focus, 
fieldset[disabled] .btn-custom:focus, 
.btn-custom.disabled:active, 
.btn-custom[disabled]:active, 
fieldset[disabled] .btn-custom:active, 
.btn-custom.disabled.active, 
.btn-custom[disabled].active, 
fieldset[disabled] .btn-custom.active { 
  background-color: #FF8103; 
  border-color: #000000; 
} 
 
.btn-custom .badge { 
  color: #FF8103; 
  background-color: #ffffff; 
}

Choose your colors obviously, to use this custom button just use the class btn-custom

Button text

To do more custom buttons just copy the CSS above and change the colors stated.