Buttons | Fluid

Button Style 1

<section id="buttons" class="shortcodes">
<div class="container">
<div class="row">
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-1">Button</button>
      <button href="#" class="btn btn-md btn-primary varient-1">Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-1">Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-2">Button</button>
      <button href="#" class="btn btn-md btn-primary varient-2">Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-2">Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-3">Button</button>
      <button href="#" class="btn btn-md btn-primary varient-3">Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-3">Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-4">Button</button>
      <button href="#" class="btn btn-md btn-primary varient-4">Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-4">Button</button>
    </div>
  </div>
</div></div></section>

Button Style 2

<section id="buttons" class="shortcodes">
<div class="container">
<div class="row">
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-1">Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-1">Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-1">Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-2">Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-2">Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-2">Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-3">Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-3">Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-3">Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-4">Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-4">Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-4">Button</button>
    </div>
  </div>
</div></div></section>

Button Style 3

<section id="buttons" class="shortcodes">
<div class="container">
<div class="row">
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-1"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-primary varient-1"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-1"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-2"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-primary varient-2"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-2"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-3"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-primary varient-3"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-3"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="btn-solid">
      <button href="#" class="btn btn-sm btn-primary varient-4"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-primary varient-4"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-primary varient-4"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
</div></div></section>

Button Style 4

<section id="buttons" class="shortcodes">
<div class="container">
<div class="row">
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-1"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-1"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-1"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-2"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-2"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-2"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-3"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-3"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-3"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-3">
    <div class="button-outline">
      <button href="#" class="btn btn-sm btn-outline-primary varient-4"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-md btn-outline-primary varient-4"><i class="fas fa-check"></i>Button</button>
      <button href="#" class="btn btn-lg btn-outline-primary varient-4"><i class="fas fa-check"></i>Button</button>
    </div>
  </div>
</div></div></section>