Buttons

Default Buttons


<button type="button" class="btn btn-primary fs-16 fw-normal text-white">Primary</button>
<button type="button" class="btn btn-secondary fs-16 fw-normal text-white">Secondary</button>
<button type="button" class="btn btn-success fs-16 fw-normal text-white">Success</button>
<button type="button" class="btn btn-danger fs-16 fw-normal text-white">Danger</button>
<button type="button" class="btn btn-warning fs-16 fw-normal text-white">Warning</button>
<button type="button" class="btn btn-info fs-16 fw-normal text-white">Info</button>
<button type="button" class="btn btn-light fs-16 fw-normal text-white">Light</button>
<button type="button" class="btn btn-dark fs-16 fw-normal text-white">Dark</button>
<button type="button" class="btn btn-link fs-16 fw-normal text-white">Link</button>

Outline buttons


<button type="button" class="btn btn-outline-primary fw-normal fs-16 hover-white">Primary</button>
<button type="button" class="btn btn-outline-secondary fw-normal fs-16 hover-white">Secondary</button>
<button type="button" class="btn btn-outline-success fw-normal fs-16 hover-white">Success</button>
<button type="button" class="btn btn-outline-danger fw-normal fs-16 hover-white">Danger</button>
<button type="button" class="btn btn-outline-warning fw-normal fs-16 hover-white">Warning</button>
<button type="button" class="btn btn-outline-info fw-normal fs-16 hover-white">Info</button>
<button type="button" class="btn btn-outline-light fw-normal fs-16 hover-white">Light</button>
<button type="button" class="btn btn-outline-dark fw-normal fs-16 hover-white">Dark</button>

Soft Buttons


<button type="button" class="btn bg-primary bg-opacity-10 fw-normal fs-16 text-primary">Primary</button>
<button type="button" class="btn bg-secondary bg-opacity-10 fw-normal fs-16 text-secondary">Secondary</button>
<button type="button" class="btn bg-success bg-opacity-10 fw-normal fs-16 text-success">Success</button>
<button type="button" class="btn bg-danger bg-opacity-10 fw-normal fs-16 text-danger">Danger</button>
<button type="button" class="btn bg-warning bg-opacity-10 fw-normal fs-16 text-warning">Warning</button>
<button type="button" class="btn bg-info bg-opacity-10 fw-normal fs-16 text-info">Info</button>
<button type="button" class="btn bg-light bg-opacity-10 fw-normal fs-16 text-light">Light</button>
<button type="button" class="btn bg-dark bg-opacity-10 fw-normal fs-16 text-dark">Dark</button>
<button type="button" class="btn bg-link bg-opacity-10 fw-normal fs-16 text-link">Link</button>

Buttons With Icon


<button type="button" class="btn btn-primary fs-16 fw-normal text-white"><i class="ri-add-line"></i> Primary</button>
<button type="button" class="btn btn-secondary fs-16 fw-normal text-white"><i class="ri-add-line"></i> Secondary</button>
<button type="button" class="btn btn-success fs-16 fw-normal text-white">Success</button>
<button type="button" class="btn btn-danger fs-16 fw-normal text-white"><i class="ri-add-line"></i> Danger</button>
<button type="button" class="btn btn-warning fs-16 fw-normal text-white"><i class="ri-add-line"></i> Warning</button>
<button type="button" class="btn btn-info fs-16 fw-normal text-white"><i class="ri-add-line"></i> Info</button>
<button type="button" class="btn btn-light fs-16 fw-normal text-white"><i class="ri-add-line"></i> Light</button>
<button type="button" class="btn btn-dark fs-16 fw-normal text-white"><i class="ri-add-line"></i> Dark</button>
<button type="button" class="btn btn-link fs-16 fw-normal text-white"><i class="ri-add-line"></i> Link</button>

Rounded Buttons


<button type="button" class="btn btn-primary fs-16 fw-normal text-white rounded-pill">Primary</button>
<button type="button" class="btn btn-secondary fs-16 fw-normal text-white rounded-pill">Secondary</button>
<button type="button" class="btn btn-success fs-16 fw-normal text-white rounded-pill">Success</button>
<button type="button" class="btn btn-danger fs-16 fw-normal text-white rounded-pill">Danger</button>
<button type="button" class="btn btn-warning fs-16 fw-normal text-white rounded-pill">Warning</button>
<button type="button" class="btn btn-info fs-16 fw-normal text-white rounded-pill">Info</button>
<button type="button" class="btn btn-light fs-16 fw-normal text-white rounded-pill">Light</button>
<button type="button" class="btn btn-dark fs-16 fw-normal text-white rounded-pill">Dark</button>
<button type="button" class="btn btn-link fs-16 fw-normal text-white rounded-pill">Link</button>

Outline Rounded Buttons


<button type="button" class="btn btn-outline-primary fw-normal fs-16 hover-white rounded-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary fw-normal fs-16 hover-white rounded-pill">Secondary</button>
<button type="button" class="btn btn-outline-success fw-normal fs-16 hover-white rounded-pill">Success</button>
<button type="button" class="btn btn-outline-danger fw-normal fs-16 hover-white rounded-pill">Danger</button>
<button type="button" class="btn btn-outline-warning fw-normal fs-16 hover-white rounded-pill">Warning</button>
<button type="button" class="btn btn-outline-info fw-normal fs-16 hover-white rounded-pill">Info</button>
<button type="button" class="btn btn-outline-light fw-normal fs-16 hover-white rounded-pill">Light</button>
<button type="button" class="btn btn-outline-dark fw-normal fs-16 hover-white rounded-pill">Dark</button>

Block Buttons


<button type="button" class="btn btn-primary fs-16 fw-normal text-white py-3 px-4 w-100">Block Button</button>
<button type="button" class="btn bg-primary bg-opacity-50 fs-16 fw-normal text-white py-3 px-4 w-100">Block Button</button>