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
<a class="btn btn-custom" href="https://domain.com/link" role="button">Button text</a>
To do more custom buttons just copy the CSS above and change the colors stated.