Bootstrap Buttons - Component Snippets

<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn primary-btn"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn primary-btn-outline"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn primary-btn deactive"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn primary-btn-outline deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn primary-btn-link"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn primary-btn-link deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-left primary-btn">
      <i class="lni lni-play"></i>
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-right primary-btn">
      Button RG
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn primary-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn btn-lg primary-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn btn-sm primary-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn square primary-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn semi-rounded primary-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn btn-lg rounded-full primary-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
</ul>

/* ===== Buttons Css ===== */
.primary-btn {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.primary-btn, .primary-btn:hover, .primary-btn:focus {
  background: var(--primary-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.primary-btn {
  background: var(--gray-4);
  color: var(--dark-3);
  pointer-events: none;
}

.primary-btn-outline {
  border-color: var(--primary);
  color: var(--primary);
}
.active.primary-btn-outline, .primary-btn-outline:hover, .primary-btn-outline:focus {
  background: var(--primary-dark);
  color: var(--white);
}
.deactive.primary-btn-outline {
  color: var(--dark-3);
  border-color: var(--gray-4);
  pointer-events: none;
}

.primary-btn-link {
  color: var(--primary);
}
.active.primary-btn-link, .primary-btn-link:hover, .primary-btn-link:focus {
  color: var(--primary-dark);
}
.deactive.primary-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn success-btn"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn success-btn-outline"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn success-btn deactive"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn success-btn-outline deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn success-btn-link"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn success-btn-link deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-left success-btn">
      <i class="lni lni-play"></i>
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-right success-btn">
      Button RG
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn success-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn btn-lg success-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
</ul>

.success-btn {
  background: var(--success);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.success-btn, .success-btn:hover, .success-btn:focus {
  background: var(--success-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.success-btn {
  background: var(--success-light);
  color: var(--dark-3);
  pointer-events: none;
}

.success-btn-outline {
  border-color: var(--success);
  color: var(--success);
}
.active.success-btn-outline, .success-btn-outline:hover, .success-btn-outline:focus {
  background: var(--success-dark);
  color: var(--white);
}
.deactive.success-btn-outline {
  color: var(--dark-3);
  border-color: var(--success-light);
  pointer-events: none;
}

.success-btn-link {
  color: var(--success);
}
.active.success-btn-link, .success-btn-link:hover, .success-btn-link:focus {
  color: var(--success-dark);
}
.deactive.success-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn info-btn"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn info-btn-outline"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn info-btn deactive"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn info-btn-outline deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn info-btn-link"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn info-btn-link deactive"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-left info-btn">
      <i class="lni lni-play"></i>
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-right info-btn">
      Button RG
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn info-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn btn-lg info-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
</ul>

.info-btn {
  background: var(--info);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.info-btn, .info-btn:hover, .info-btn:focus {
  background: var(--info-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.info-btn {
  background: var(--info-light);
  color: var(--dark-3);
  pointer-events: none;
}

.info-btn-outline {
  border-color: var(--info);
  color: var(--info);
}
.active.info-btn-outline, .info-btn-outline:hover, .info-btn-outline:focus {
  background: var(--info-dark);
  color: var(--white);
}
.deactive.info-btn-outline {
  color: var(--dark-3);
  border-color: var(--info-light);
  pointer-events: none;
}

.info-btn-link {
  color: var(--info);
}
.active.info-btn-link, .info-btn-link:hover, .info-btn-link:focus {
  color: var(--info-dark);
}
.deactive.info-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn caution-btn"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn caution-btn-outline"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn caution-btn deactive"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn caution-btn-outline deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn caution-btn-link"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn caution-btn-link deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-left caution-btn">
      <i class="lni lni-play"></i>
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-right caution-btn">
      Button RG
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn caution-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn btn-lg caution-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
</ul>

.caution-btn {
  background: var(--caution);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.caution-btn, .caution-btn:hover, .caution-btn:focus {
  background: var(--caution-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.caution-btn {
  background: var(--caution-light);
  color: var(--dark-3);
  pointer-events: none;
}

.caution-btn-outline {
  border-color: var(--caution);
  color: var(--caution);
}
.active.caution-btn-outline, .caution-btn-outline:hover, .caution-btn-outline:focus {
  background: var(--caution-dark);
  color: var(--white);
}
.deactive.caution-btn-outline {
  color: var(--dark-3);
  border-color: var(--caution-light);
  pointer-events: none;
}

.caution-btn-link {
  color: var(--caution);
}
.active.caution-btn-link, .caution-btn-link:hover, .caution-btn-link:focus {
  color: var(--caution-dark);
}
.deactive.caution-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn error-btn"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn error-btn-outline"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn error-btn deactive"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn error-btn-outline deactive">
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn error-btn-link"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn error-btn-link deactive"> Button RG </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-left error-btn">
      <i class="lni lni-play"></i>
      Button RG
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-right error-btn">
      Button RG
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn error-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
   <li class="me-3 mb-3">
      <a href="javascript:void(0)" class="btn icon-btn btn-lg error-btn">
      <i class="lni lni-play"></i>
      </a>
   </li>
</ul>

.error-btn {
  background: var(--error);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.error-btn, .error-btn:hover, .error-btn:focus {
  background: var(--error-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.error-btn {
  background: var(--error-light);
  color: var(--dark-3);
  pointer-events: none;
}

.error-btn-outline {
  border-color: var(--error);
  color: var(--error);
}
.active.error-btn-outline, .error-btn-outline:hover, .error-btn-outline:focus {
  background: var(--error-dark);
  color: var(--white);
}
.deactive.error-btn-outline {
  color: var(--dark-3);
  border-color: var(--error-light);
  pointer-events: none;
}

.error-btn-link {
  color: var(--error);
}
.active.error-btn-link, .error-btn-link:hover, .error-btn-link:focus {
  color: var(--error-dark);
}
.deactive.error-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}

<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn active">Left</a>
      <a href="javascript:void(0)" class="btn primary-btn">Center</a>
      <a href="javascript:void(0)" class="btn primary-btn">Right</a>
   </div>
</div>
<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn active square">Left</a>
      <a href="javascript:void(0)" class="btn primary-btn square">Center</a>
      <a href="javascript:void(0)" class="btn primary-btn square">Right</a>
   </div>
</div>
<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn active semi-rounded">
      Left
      </a>
      <a href="javascript:void(0)" class="btn primary-btn semi-rounded"> Center </a>
      <a href="javascript:void(0)" class="btn primary-btn semi-rounded"> Right </a>
   </div>
</div>
<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn active rounded-full">
      Left
      </a>
      <a href="javascript:void(0)" class="btn primary-btn rounded-full"> Center </a>
      <a href="javascript:void(0)" class="btn primary-btn rounded-full"> Right </a>
   </div>
</div>
<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn-outline active">Left</a>
      <a href="javascript:void(0)" class="btn primary-btn-outline">Center</a>
      <a href="javascript:void(0)" class="btn primary-btn-outline">Right</a>
   </div>
</div>
<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn-outline active square">Left</a>
      <a href="javascript:void(0)" class="btn primary-btn-outline square">Center</a>
      <a href="javascript:void(0)" class="btn primary-btn-outline square">Right</a>
   </div>
</div>
<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn-outline active semi-rounded">
      Left
      </a>
      <a href="javascript:void(0)" class="btn primary-btn-outline semi-rounded">
      Center
      </a>
      <a href="javascript:void(0)" class="btn primary-btn-outline semi-rounded">
      Right
      </a>
   </div>
</div>
<div class="group-buttons mb-4">
   <div class="btn-group">
      <a href="javascript:void(0)" class="btn primary-btn-outline active rounded-full">
      Left
      </a>
      <a href="javascript:void(0)" class="btn primary-btn-outline rounded-full">
      Center
      </a>
      <a href="javascript:void(0)" class="btn primary-btn-outline rounded-full">
      Right
      </a>
   </div>
</div>

.primary-btn {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-2);
}
.active.primary-btn, .primary-btn:hover, .primary-btn:focus {
  background: var(--primary-dark);
  color: var(--white);
  box-shadow: var(--shadow-4);
}
.deactive.primary-btn {
  background: var(--gray-4);
  color: var(--dark-3);
  pointer-events: none;
}

.primary-btn-outline {
  border-color: var(--primary);
  color: var(--primary);
}
.active.primary-btn-outline, .primary-btn-outline:hover, .primary-btn-outline:focus {
  background: var(--primary-dark);
  color: var(--white);
}
.deactive.primary-btn-outline {
  color: var(--dark-3);
  border-color: var(--gray-4);
  pointer-events: none;
}

.primary-btn-link {
  color: var(--primary);
}
.active.primary-btn-link, .primary-btn-link:hover, .primary-btn-link:focus {
  color: var(--primary-dark);
}
.deactive.primary-btn-link {
  color: var(--dark-3);
  pointer-events: none;
}