<button type="button" class="btn btn-primary fw-medium text-white py-2 px-4">Primary</button>
<button type="button" class="btn btn-secondary fw-medium text-white py-2 px-4">Secondary</button>
<button type="button" class="btn btn-success fw-medium text-white py-2 px-4">Success</button>
<button type="button" class="btn btn-danger fw-medium text-white py-2 px-4">Danger</button>
<button type="button" class="btn btn-warning fw-medium text-white py-2 px-4">Warning</button>
<button type="button" class="btn btn-info fw-medium text-white py-2 px-4">Info</button>
<button type="button" class="btn btn-light fw-medium text-white py-2 px-4">Light</button>
<button type="button" class="btn btn-dark fw-medium text-white py-2 px-4">Dark</button>
<button type="button" class="btn btn-link fw-medium text-white py-2 px-4">Link</button>

<button type="button" class="btn btn-outline-primary fw-medium py-2 px-4 hover-white">Primary</button>
<button type="button" class="btn btn-outline-secondary fw-medium py-2 px-4 hover-white">Secondary</button>
<button type="button" class="btn btn-outline-success fw-medium py-2 px-4 hover-white">Success</button>
<button type="button" class="btn btn-outline-danger fw-medium py-2 px-4 hover-white">Danger</button>
<button type="button" class="btn btn-outline-warning fw-medium py-2 px-4 hover-white">Warning</button>
<button type="button" class="btn btn-outline-info fw-medium py-2 px-4 hover-white">Info</button>
<button type="button" class="btn btn-outline-light fw-medium py-2 px-4 hover-white">Light</button>
<button type="button" class="btn btn-outline-dark fw-medium py-2 px-4 hover-white">Dark</button>

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

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

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

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

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