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

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

<!-- disabled button -->
<button class="btn disabled-btn-md" disabled="disabled">
  Disabled
</button>

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

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

<!-- primary text button -->
<a href=""><button class="btn primary-text-btn-md">
    Primary Text</button>
</a>

<!-- secondary text button -->
<a href=""><button class="btn secondary-text-btn-md">
    Secondary Text</button>
</a>

<!-- cart icon button -->
<button class="btn icon-btn-md">
  <i class="fas fa-shopping-cart"></i>
</button>

<!-- trash icon button -->
<button class="btn icon-btn-md">
  <i class="fas fa-trash"></i>
</button>

<!-- history icon button -->
<button class="btn icon-btn-md">
  <i class="fas fa-history"></i>
</button>

<!-- labelled cart icon button -->
<button class="btn label-icon-btn-md">
  <i class="fas fa-shopping-cart"></i>
  Add to cart
</button>

<!-- labelled save icon button -->
<button class="btn label-icon-btn-md">
  <i class="fas fa-save"></i>
  Save
</button>

<!-- labelled trash icon button -->
<button class="btn label-icon-outline-btn-md">
  <i class="fas fa-trash"></i>
  Delete
</button>

<!-- floating cart icon button -->
<a href=""><button class="btn floating-btn-sm">
    <i class="fas fa-shopping-cart"></i></button>
</a>

<!-- floating plus icon button -->
<a href=""><button class="btn floating-btn-sm">
    <i class="fas fa-plus"></i></button>
</a>

<!-- floating location icon button -->
<a href=""><button class="btn floating-btn-sm">
    <i class="fas fa-location-arrow"></i></button>
</a>