Bootstrap Buttons - Component Snippets
Bring Buttons to your site in seconds, with a simple copy-paste! Bootstrap Buttons is a set of UI and UX snippets that'll work and play. 20+ Bootstrap well-designed button examples and snippets that you can copy-paste.
Error Button
<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;
}
Success Button
<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;
}
Info Button
<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;
}
Primary Button
<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;
}
Caution Button
<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;
}
Primary Alignment Button
<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;
}