Icon Button
Copy
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<br>
<div class="pt-2">
<button type="button" class="btn btn-labeled btn-primary m-r-px">
<span class="btn-label me-2"><i class="bi bi-plus"></i></span>Primary Button</button>
<button class="btn btn-primary"><i class="bi bi-plus"></i></button>
</div>
<div class="pt-2">
<button type="button" class="btn btn-labeled btn-secondary i-br m-r ">
<span class="btn-label me-2"><i class="bi bi-plus"></i></span>Secondary Button</button>
<button class="btn btn-secondary i-br"><i class="bi bi-plus"></i></button>
</div>
<div class="pt-2">
<button type="button" class="btn btn-labeled btn-secondary m-r">
<span class="btn-label me-2"><i class="bi bi-plus"></i></span>Secondary Button</button>
<button class="btn btn-secondary"><i class="bi bi-plus"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<br>
<div class="pt-2">
<button type="button" class="btn btn-labeled btn-primary m-r-px active">
<span class="btn-label me-2"><i class="bi bi-plus"></i></span>Primary Button</button>
<button class="btn btn-primary active"><i class="bi bi-plus"></i></button>
</div>
<div class="pt-2">
<button type="button" class="btn btn-labeled btn-secondary sec-with-icon i-br m-r ">
<span class="btn-label me-2"><i class="bi bi-plus"></i></span>Secondary Button</button>
<button class="btn btn-secondary i-br"><i class="bi bi-plus"></i></button>
</div>
<div class="pt-2">
<button type="button" class="btn btn-labeled btn-secondary br-none i-br m-r ">
<span class="btn-label me-2"><i class="bi bi-plus"></i></span>Secondary Button</button>
<button class="btn btn-secondary i-br br-none"><i class="bi bi-plus"></i></button>
</div>
</div>
</div>
</div>
</div>
Copy
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.m-r-px {
margin-right: 103px;
}
.btn {
border-radius: 6px;
text-transform: capitalize;
font-weight: 600;
margin-bottom: 5px;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #167DF5;
--bs-btn-border-color: #167DF5;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #61A7F8;
--bs-btn-hover-border-color: #ABD0FB;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0D67CB;
--bs-btn-active-border-color: #ABD0FB;
--bs-btn-active-shadow: inset 0 3px 5pxrgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #0d6efd;
--bs-btn-disabled-border-color: #0d6efd;
line-height: 1.3800000;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #0d6efd;
--bs-btn-border-color: #0d6efd;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a53be;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #0d6efd;
--bs-btn-disabled-border-color: #0d6efd;
}
.btn {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: #212529;
--bs-btn-bg: transparent;
--bs-btn-border-width: 1px;
--bs-btn-border-color: transparent;
--bs-btn-border-radius: 0.375rem;
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
button, select {
text-transform: none;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button {
border-radius: 0;
}
.me-2 {
margin-right: 0.5rem!important;
}
.br-none {
border: none;
background: #f1f9ff !important;
}
.i-br {
border: 1px solid #167DF5;
}