Button Style 1
<div class="row pt-1">
<!-- Color 1 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-primary btn-style-1 btn-sm">BUTTON</button>
<button class="btn btn-primary btn-style-1 btn-md">BUTTON</button>
<button class="btn btn-primary btn-style-1 btn-lg">BUTTON</button>
</div>
<!-- Color 2 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-secondary btn-style-1 btn-sm">BUTTON</button>
<button class="btn btn-secondary btn-style-1 btn-md">BUTTON</button>
<button class="btn btn-secondary btn-style-1 btn-lg">BUTTON</button>
</div>
<!-- Color 3 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-danger btn-style-1 btn-sm">BUTTON</button>
<button class="btn btn-danger btn-style-1 btn-md">BUTTON</button>
<button class="btn btn-danger btn-style-1 btn-lg">BUTTON</button>
</div>
<!-- Color 4 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-success btn-style-1 btn-sm">BUTTON</button>
<button class="btn btn-success btn-style-1 btn-md">BUTTON</button>
<button class="btn btn-success btn-style-1 btn-lg">BUTTON</button>
</div>
</div>
Button Style 2
<div class="row pt-1">
<!-- Color 1 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-primary btn-style-2 btn-sm">BUTTON</button>
<button class="btn btn-primary btn-style-2 btn-md">BUTTON</button>
<button class="btn btn-primary btn-style-2 btn-lg">BUTTON</button>
</div>
<!-- Color 2 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-secondary btn-style-2 btn-sm">BUTTON</button>
<button class="btn btn-secondary btn-style-2 btn-md">BUTTON</button>
<button class="btn btn-secondary btn-style-2 btn-lg">BUTTON</button>
</div>
<!-- Color 3 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-danger btn-style-2 btn-sm">BUTTON</button>
<button class="btn btn-danger btn-style-2 btn-md">BUTTON</button>
<button class="btn btn-danger btn-style-2 btn-lg">BUTTON</button>
</div>
<!-- Color 4 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-success btn-style-2 btn-sm">BUTTON</button>
<button class="btn btn-success btn-style-2 btn-md">BUTTON</button>
<button class="btn btn-success btn-style-2 btn-lg">BUTTON</button>
</div>
</div>
Button Style 3
<div class="row pt-1">
<!-- Color 1 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-primary btn-style-3 btn-sm">BUTTON</button>
<button class="btn btn-primary btn-style-3 btn-md">BUTTON</button>
<button class="btn btn-primary btn-style-3 btn-lg">BUTTON</button>
</div>
<!-- Color 2 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-secondary btn-style-3 btn-sm">BUTTON</button>
<button class="btn btn-secondary btn-style-3 btn-md">BUTTON</button>
<button class="btn btn-secondary btn-style-3 btn-lg">BUTTON</button>
</div>
<!-- Color 3 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-danger btn-style-3 btn-sm">BUTTON</button>
<button class="btn btn-danger btn-style-3 btn-md">BUTTON</button>
<button class="btn btn-danger btn-style-3 btn-lg">BUTTON</button>
</div>
<!-- Color 4 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-success btn-style-3 btn-sm">BUTTON</button>
<button class="btn btn-success btn-style-3 btn-md">BUTTON</button>
<button class="btn btn-success btn-style-3 btn-lg">BUTTON</button>
</div>
</div>
Button Style 4
<div class="row pt-1">
<!-- Color 1 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-primary btn-style-4 btn-sm">BUTTON</button>
<button class="btn btn-primary btn-style-4 btn-md">BUTTON</button>
<button class="btn btn-primary btn-style-4 btn-lg">BUTTON</button>
</div>
<!-- Color 2 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-secondary btn-style-4 btn-sm">BUTTON</button>
<button class="btn btn-secondary btn-style-4 btn-md">BUTTON</button>
<button class="btn btn-secondary btn-style-4 btn-lg">BUTTON</button>
</div>
<!-- Color 3 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-danger btn-style-4 btn-sm">BUTTON</button>
<button class="btn btn-danger btn-style-4 btn-md">BUTTON</button>
<button class="btn btn-danger btn-style-4 btn-lg">BUTTON</button>
</div>
<!-- Color 4 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-success btn-style-4 btn-sm">BUTTON</button>
<button class="btn btn-success btn-style-4 btn-md">BUTTON</button>
<button class="btn btn-success btn-style-4 btn-lg">BUTTON</button>
</div>
</div>
Button Style 5
<div class="row pt-1">
<!-- Color 1 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-primary btn-style-5 btn-sm">BUTTON</button>
<button class="btn btn-primary btn-style-5 btn-md">BUTTON</button>
<button class="btn btn-primary btn-style-5 btn-lg">BUTTON</button>
</div>
<!-- Color 2 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-secondary btn-style-5 btn-sm">BUTTON</button>
<button class="btn btn-secondary btn-style-5 btn-md">BUTTON</button>
<button class="btn btn-secondary btn-style-5 btn-lg">BUTTON</button>
</div>
<!-- Color 3 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-danger btn-style-5 btn-sm">BUTTON</button>
<button class="btn btn-danger btn-style-5 btn-md">BUTTON</button>
<button class="btn btn-danger btn-style-5 btn-lg">BUTTON</button>
</div>
<!-- Color 4 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-success btn-style-5 btn-sm">BUTTON</button>
<button class="btn btn-success btn-style-5 btn-md">BUTTON</button>
<button class="btn btn-success btn-style-5 btn-lg">BUTTON</button>
</div>
</div>
Button Style 6
<div class="row pt-1">
<!-- Color 1 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-primary btn-style-6 btn-sm">BUTTON</button>
<button class="btn btn-primary btn-style-6 btn-md">BUTTON</button>
<button class="btn btn-primary btn-style-6 btn-lg">BUTTON</button>
</div>
<!-- Color 2 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-secondary btn-style-6 btn-sm">BUTTON</button>
<button class="btn btn-secondary btn-style-6 btn-md">BUTTON</button>
<button class="btn btn-secondary btn-style-6 btn-lg">BUTTON</button>
</div>
<!-- Color 3 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-danger btn-style-6 btn-sm">BUTTON</button>
<button class="btn btn-danger btn-style-6 btn-md">BUTTON</button>
<button class="btn btn-danger btn-style-6 btn-lg">BUTTON</button>
</div>
<!-- Color 4 -->
<div class="col-lg-3 col-md-6 col-12">
<button class="btn btn-success btn-style-6 btn-sm">BUTTON</button>
<button class="btn btn-success btn-style-6 btn-md">BUTTON</button>
<button class="btn btn-success btn-style-6 btn-lg">BUTTON</button>
</div>
</div>