Primary Button
Copy
<div>
<button type="button" class="btn btn-primary me-3">Primary Button</button>
<button type="button" class="btn btn-primary me-3 disabled">Disabled button</button>
<button type="button" class="btn btn-primary me-3 active">Pressed button</button>
<button type="button" class="btn btn-primary btn-sm me-3">Small button</button>
<button type="button" class="btn btn-primary btn-lg me-3">Large button</button>
</div>
Copy
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.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;
}
.me-3 {
margin-right: 1rem!important;
}
.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;
}