Buttons

<!-- Primary solid button -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Secondary solid button -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Success solid button -->
<button type="button" class="btn btn-success">Success</button>

<!-- Danger solid button -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Warning solid button -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Info solid button -->
<button type="button" class="btn btn-info">Info</button>

<!-- Light solid button -->
<button type="button" class="btn btn-light">Info</button>

<!-- Dark solid button -->
<button type="button" class="btn btn-dark">Dark</button>

<!-- Gradient solid button -->
<button type="button" class="btn btn-gradient">Gradient</button>

<!-- Link button -->
<button type="button" class="btn btn-link">Link</button>

<!-- Primary outline button -->
<button type="button" class="btn btn-outline-primary">Primary</button>

<!-- Secondary outline button -->
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- Success outline button -->
<button type="button" class="btn btn-outline-success">Success</button>

<!-- Danger outline button -->
<button type="button" class="btn btn-outline-danger">Danger</button>

<!-- Warning outline button -->
<button type="button" class="btn btn-outline-warning">Warning</button>

<!-- Info outline button -->
<button type="button" class="btn btn-outline-info">Info</button>

<!-- Light outline button -->
<button type="button" class="btn btn-outline-light">Info</button>

<!-- Dark outline button -->
<button type="button" class="btn btn-outline-dark">Dark</button>

<!-- Primary translucent button -->
<button type="button" class="btn btn-translucent-primary">Primary</button>

<!-- Success translucent button -->
<button type="button" class="btn btn-translucent-success">Success</button>

<!-- Danger translucent button -->
<button type="button" class="btn btn-translucent-danger">Danger</button>

<!-- Warning translucent button -->
<button type="button" class="btn btn-translucent-warning">Warning</button>

<!-- Info translucent button -->
<button type="button" class="btn btn-translucent-info">Info</button>

<!-- Light translucent button -->
<button type="button" class="btn btn-translucent-light">Info</button>

<!-- Dark translucent button -->
<button type="button" class="btn btn-translucent-dark">Dark</button>

<!-- Solid button -->
<button type="button" class="btn btn-primary btn-hover-shadow">Solid</button>

<!-- Outline button -->
<button type="button" class="btn btn-outline-primary btn-hover-shadow">Outline</button>

<!-- Translucent button -->
<button type="button" class="btn btn-translucent-primary btn-hover-shadow">Tranlucent</button>

<!-- Primary button with text and icon -->
<button type="button" class="btn btn-primary">
  <i class="ci-profile mt-n1 me-2 align-middle"></i>
  Profile
</button>

<!-- Secondary solid icon button -->
<button type="button" class="btn btn-secondary btn-icon">
  <i class="ci-upload mt-n1 align-middle"></i>
</button>

<!-- Danger outline icon button -->
<button type="button" class="btn btn-outline-danger btn-icon">
  <i class="ci-danger mt-n1 align-middle"></i>
</button>

<!-- Success solid icon button -->
<button type="button" class="btn btn-success btn-icon">
  <i class="ci-check mt-n1 align-middle"></i>
</button>

<!-- Warning pill solid icon button -->
<button type="button" class="btn btn-warning rounded-pill btn-icon">
  <i class="ci-star mt-n1 align-middle"></i>
</button>

<!-- Info pill outline icon button -->
<button type="button" class="btn btn-outline-info rounded-pill btn-icon">
  <i class="ci-bell mt-n1 align-middle"></i>
</button>

<!-- App Store button -->
<a href="#" class="btn-market btn-apple" role="button">
  <span class="btn-market-subtitle">Download on the</span>
  <span class="btn-market-title">App Store</span>
</a>

<!-- Google Play button -->
<a href="#" class="btn-market btn-google" role="button">
  <span class="btn-market-subtitle">Download on the</span>
  <span class="btn-market-title">Google Play</span>
</a>

<!-- Windows store button -->
<a href="#" class="btn-market btn-windows" role="button">
  <span class="btn-market-subtitle">Download on the</span>
  <span class="btn-market-title">Windows Store</span>
</a>

<!-- Amazon button -->
<a href="#" class="btn-market btn-amazon" role="button">
  <span class="btn-market-subtitle">Order now at</span>
  <span class="btn-market-title">Amazon.com</span>
</a>

<!-- Rounded solid button -->
<button type="button" class="btn btn-primary">Rounded</button>

<!-- Pill solid button -->
<button type="button" class="btn btn-primary rounded-pill">Pill button</button>

<!-- Square solid button -->
<button type="button" class="btn btn-primary rounded-0">Square</button>

<!-- Rounded outline button -->
<button type="button" class="btn btn-outline-primary">Rounded</button>

<!-- Pill outline button -->
<button type="button" class="btn btn-outline-primary rounded-pill">Pill button</button>

<!-- Square outline button -->
<button type="button" class="btn btn-outline-primary rounded-0">Square</button>

<!-- Large solid button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<!-- Normal solid button -->
<button type="button" class="btn btn-primary">Normal button</button>

<!-- Small solid button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- Large outline button -->
<button type="button" class="btn btn-outline-primary btn-lg">Large button</button>

<!-- Normal outline button -->
<button type="button" class="btn btn-outline-primary">Normal button</button>

<!-- Small outline button -->
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>

<!-- Block solid button -->
<button type="button" class="btn btn-primary w-100">Block level button</button>

<!-- Block outline button -->
<button type="button" class="btn btn-outline-primary d-block w-100">Block level button</button>

<!-- Button states -->
<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-secondary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
<button type="button" class="btn btn-primary" data-bs-toggle="button">Button toggle</button>
<button type="button" class="btn btn-primary">
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
    <span class="visually-hidden">Loading...</span>
  </span>
</button>
<button type="button" class="btn btn-secondary">
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true">
    <span class="visually-hidden">Loading...</span>
  </span>
</button>