Buttons in Bootstrap are an important tool to build an interface. While base bootstrap buttons are simple and easy to use, their default styling is seen all across the web and customizing them quickly becomes a necessity in every project.
Bootbox helps you with this by providing several button modifications.
By Default, Bootstrap buttons are plain. In projects where gradients are used, our gradient buttons may help making buttons more engaging:
<button class="btn btn-gradient-primary">primary</button>
<button class="btn btn-gradient-info">info</button>
<button class="btn btn-gradient-success">success</button>
<button class="btn btn-gradient-warning">warning</button>
<button class="btn btn-gradient-danger">danger</button>
You can include these gradients using
// -> import mods AFTER bootstrap/scss/variables
// -> import mods AFTER bootstrap/scss/bootstrap
@import '~@syntro-opensource/bootbox/scss/buttons/gradients';
Plastic buttons use shadows to give a feeling of plasticity to buttons. These buttons mimic material design.
<button class="btn btn-plastic btn-primary">primary</button>
<button class="btn btn-plastic btn-info">info</button>
<button class="btn btn-plastic btn-success">success</button>
<button class="btn btn-plastic btn-warning">warning</button>
<button class="btn btn-plastic btn-danger">danger</button>
You can include the style using
// -> import mods AFTER bootstrap/scss/variables
// -> import mods AFTER bootstrap/scss/bootstrap
@import '~@syntro-opensource/bootbox/scss/buttons/plastic';
Plastic buttons can be combined with the ripple effect to achieve the complete material design look:
<button class="btn btn-plastic effect-ripple btn-primary">primary</button>
<button class="btn btn-plastic effect-ripple btn-info">info</button>
<button class="btn btn-plastic effect-ripple btn-success">success</button>
<button class="btn btn-plastic effect-ripple btn-warning">warning</button>
<button class="btn btn-plastic effect-ripple btn-danger">danger</button>