Button
Buttons.
Make use of Bootstrap's unique button styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
Buttons on BootstrapButton
Default Button
White Button
PRIMARY BUTTON
Secondary Button
Danger Button
Success Button
Warning Button
Info Button
Dark Button
Light Button
<button type="button" class="btn btn-white">Button</button>
<button type="button" class="btn btn-outline-white">Button</button>
<button type="button" class="btn btn-white light">Button</button>
<button type="button" class="btn btn-white active">Button</button>
<button type="button" class="btn btn-white btn-link">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-outline-primary">Button</button>
<button type="button" class="btn btn-primary light">Button</button>
<button type="button" class="btn btn-primary active">Button</button>
<button type="button" class="btn btn-link">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-secondary light">Button</button>
<button type="button" class="btn btn-secondary active">Button</button>
<button type="button" class="btn btn-secondary btn-link">Button</button>
<button type="button" class="btn btn-danger">Button</button>
<button type="button" class="btn btn-outline-danger">Button</button>
<button type="button" class="btn btn-danger light">Button</button>
<button type="button" class="btn btn-danger active">Button</button>
<button type="button" class="btn btn-danger btn-link">Button</button>
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-outline-success">Button</button>
<button type="button" class="btn btn-success light">Button</button>
<button type="button" class="btn btn-success active">Button</button>
<button type="button" class="btn btn-success btn-link">Button</button>
<button type="button" class="btn btn-warning"<Button</button<
<button type="button" class="btn btn-outline-warning"<Button</button<
<button type="button" class="btn btn-warning light"<Button</button<
<button type="button" class="btn btn-warning active"<Button</button<
<button type="button" class="btn btn-warning btn-link"<Button</button<
<button type="button" class="btn btn-info">Button</button>
<button type="button" class="btn btn-outline-info">Button</button>
<button type="button" class="btn btn-info light">Button</button>
<button type="button" class="btn btn-info active">Button</button>
<button type="button" class="btn btn-info btn-link">Button</button>
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-outline-dark">Button</button>
<button type="button" class="btn btn-dark light">Button</button>
<button type="button" class="btn btn-dark active">Button</button>
<button type="button" class="btn btn-dark btn-link">Button</button>
<button type="button" class="btn btn-light">Button</button>
<button type="button" class="btn btn-outline-light">Button</button>
<button type="button" class="btn btn-light">Button</button>
<button type="button" class="btn btn-light active">Button</button>
<button type="button" class="btn btn-light btn-link">Button</button>
Buttons Sizes
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm
for additional
sizes.
<button type="button" class="btn btn-primary btn-lg">Button</button>
<button type="button" class="btn btn-primary btn-md">Button</button>
<button type="button" class="btn btn-primary btn-sm">Button</button>
Button Sizes Icon
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm
to change the style
<button type="button" class="btn btn-primary btn-md">
<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_309_725)">
<path d="M11.334 2.00004C11.5091 1.82494 11.7169 1.68605 11.9457 1.59129C12.1745 1.49653 12.4197 1.44775 12.6673 1.44775C12.9149 1.44775 13.1601 1.49653 13.3889 1.59129C13.6177 1.68605 13.8256 1.82494 14.0007 2.00004C14.1757 2.17513 14.3146 2.383 14.4094 2.61178C14.5042 2.84055 14.5529 3.08575 14.5529 3.33337C14.5529 3.58099 14.5042 3.82619 14.4094 4.05497C14.3146 4.28374 14.1757 4.49161 14.0007 4.66671L5.00065 13.6667L1.33398 14.6667L2.33398 11L11.334 2.00004Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_309_725">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Edit
</button>
<button type="button" class="btn btn-light btn-md">
Download
<svg class="ms-2" xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<path d="M14.5 10V12.6667C14.5 13.0203 14.3595 13.3594 14.1095 13.6095C13.8594 13.8595 13.5203 14 13.1667 14H3.83333C3.47971 14 3.14057 13.8595 2.89052 13.6095C2.64048 13.3594 2.5 13.0203 2.5 12.6667V10" stroke="#1D69D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.16602 6.66675L8.49935 10.0001L11.8327 6.66675" stroke="#1D69D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 10V2" stroke="#1D69D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button type="button" class="btn btn-primary btn-md">
<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<g clip-path="url(#clip0_309_735)">
<path d="M5.76613 2.24995L8.5005 5.1562L11.2349 2.24995H5.76613ZM12.4974 3.09683L10.2349 5.49995H14.2661L12.4974 3.09683ZM14.0599 6.99995H8.5005H2.94113L8.5005 13.1343L14.0599 6.99995ZM2.73488 5.49995H6.76613L4.50363 3.09683L2.73488 5.49995ZM16.3068 6.75308L9.05675 14.7531C8.91613 14.9093 8.713 15 8.5005 15C8.288 15 8.088 14.9093 7.94425 14.7531L0.69425 6.75308C0.453625 6.48745 0.434875 6.09058 0.647375 5.80308L4.14738 1.05308C4.288 0.862451 4.513 0.746826 4.7505 0.746826H12.2505C12.488 0.746826 12.713 0.859326 12.8536 1.05308L16.3536 5.80308C16.5661 6.09058 16.5443 6.48745 16.3068 6.75308Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_309_735">
<rect width="16" height="16" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Exclusive
</button>
<button type="button" class="btn btn-primary light btn-md">
Logout
<svg class="ms-2" xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<path d="M6.5 14H3.83333C3.47971 14 3.14057 13.8595 2.89052 13.6095C2.64048 13.3594 2.5 13.0203 2.5 12.6667V3.33333C2.5 2.97971 2.64048 2.64057 2.89052 2.39052C3.14057 2.14048 3.47971 2 3.83333 2H6.5" stroke="#1D69D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.166 11.3334L14.4993 8.00008L11.166 4.66675" stroke="#1D69D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5 8H6.5" stroke="#1D69D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
Button Style
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm
for additional sizes.
<button type="button" class="btn btn-primary btn-md">Button</button>
<button type="button" class="btn btn-primary rounded-0 btn-md">Button</button>
<button type="button" class="btn btn-primary rounded-pill btn-md">Button</button>
<button type="button" class="btn btn-primary btn-md shadow-lg">Button</button>
<button type="button" class="btn btn-outline-primary btn-md">Button</button>
CTA Buttons
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm
for additional sizes.
<button type="button" class="btn btn-primary rounded-0">Add To Cart <span
class="btn-icon-end"><i class="fa fa-shopping-cart"></i></span>
</button>
<button type="button" class="btn btn-primary rounded-pill">Add To Cart <span class="btn-icon-end"><i class="fas fa-times"></i></span></button>
<button type="button" class="btn btn-outline-primary ">Add To Cart<span
class="btn-icon-end"><i class="fa fa-shopping-cart"></i></span>
</button>
<button type="button" class="btn btn-secondary rounded-0">Download
<div class="icon-box icon-box-sm bg-white ms-3"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g clip-path="url(#clip0_309_1361)">
<path d="M14 13.125C14 13.6082 13.6082 14 13.125 14H0.875C0.391754 14 0 13.6082 0 13.125C0 12.6418 0.391754 12.25 0.875 12.25H13.125C13.6082 12.25 14 12.6418 14 13.125ZM6.38129 10.3531C6.55216 10.524 6.77605 10.6094 7 10.6094C7.22389 10.6094 7.44789 10.524 7.61871 10.3531L10.7189 7.25296C11.0606 6.91124 11.0606 6.35723 10.7189 6.01552C10.3772 5.6738 9.82316 5.6738 9.48145 6.01552L7.875 7.62196V0.875C7.875 0.391754 7.48325 0 7 0C6.51675 0 6.125 0.391754 6.125 0.875V7.62196L4.51855 6.01552C4.17684 5.6738 3.62283 5.6738 3.28111 6.01552C2.9394 6.35723 2.9394 6.91124 3.28111 7.25296L6.38129 10.3531Z" fill="#1F2025"/>
</g>
<defs>
<clipPath id="clip0_309_1361">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg></div>
</button>
<button type="button" class="btn btn-secondary rounded-pill">Add To Cart
<div class="icon-box icon-box-sm bg-white ms-3 rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g clip-path="url(#clip0_309_1361)">
<path d="M14 13.125C14 13.6082 13.6082 14 13.125 14H0.875C0.391754 14 0 13.6082 0 13.125C0 12.6418 0.391754 12.25 0.875 12.25H13.125C13.6082 12.25 14 12.6418 14 13.125ZM6.38129 10.3531C6.55216 10.524 6.77605 10.6094 7 10.6094C7.22389 10.6094 7.44789 10.524 7.61871 10.3531L10.7189 7.25296C11.0606 6.91124 11.0606 6.35723 10.7189 6.01552C10.3772 5.6738 9.82316 5.6738 9.48145 6.01552L7.875 7.62196V0.875C7.875 0.391754 7.48325 0 7 0C6.51675 0 6.125 0.391754 6.125 0.875V7.62196L4.51855 6.01552C4.17684 5.6738 3.62283 5.6738 3.28111 6.01552C2.9394 6.35723 2.9394 6.91124 3.28111 7.25296L6.38129 10.3531Z" fill="#1F2025"/>
</g>
<defs>
<clipPath id="clip0_309_1361">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg></div>
</button>
<button type="button" class="btn btn-outline-secondary ">Add To Cart
<div class="icon-box icon-box-sm bg-secondary ms-3"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g clip-path="url(#clip0_309_1361)">
<path d="M14 13.125C14 13.6082 13.6082 14 13.125 14H0.875C0.391754 14 0 13.6082 0 13.125C0 12.6418 0.391754 12.25 0.875 12.25H13.125C13.6082 12.25 14 12.6418 14 13.125ZM6.38129 10.3531C6.55216 10.524 6.77605 10.6094 7 10.6094C7.22389 10.6094 7.44789 10.524 7.61871 10.3531L10.7189 7.25296C11.0606 6.91124 11.0606 6.35723 10.7189 6.01552C10.3772 5.6738 9.82316 5.6738 9.48145 6.01552L7.875 7.62196V0.875C7.875 0.391754 7.48325 0 7 0C6.51675 0 6.125 0.391754 6.125 0.875V7.62196L4.51855 6.01552C4.17684 5.6738 3.62283 5.6738 3.28111 6.01552C2.9394 6.35723 2.9394 6.91124 3.28111 7.25296L6.38129 10.3531Z" fill="#fff"/>
</g>
<defs>
<clipPath id="clip0_309_1361">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg></div>
</button>
Dropdown Button
Fancy larger or smaller buttons? Add
.btn-lg
or .btn-sm
for additional sizes.
<div class="dropdown">
<button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M9.33268 1.33337H3.99935C3.64573 1.33337 3.30659 1.47385 3.05654 1.7239C2.80649 1.97395 2.66602 2.31309 2.66602 2.66671V13.3334C2.66602 13.687 2.80649 14.0261 3.05654 14.2762C3.30659 14.5262 3.64573 14.6667 3.99935 14.6667H11.9993C12.353 14.6667 12.6921 14.5262 12.9422 14.2762C13.1922 14.0261 13.3327 13.687 13.3327 13.3334V5.33337L9.33268 1.33337Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.33398 1.33337V5.33337H13.334" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.6673 8.66663H5.33398" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.6673 11.3334H5.33398" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.66732 6H6.00065H5.33398" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Download PDF
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Drop up
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Buttons Transparent
Default button style .btn-primary
and more.
Light Fill Button
<button type="button" class="btn btn-primary btn-transparent">Primary</button>
<button type="button" class="btn btn-secondary btn-transparent">Secondary</button>
<button type="button" class="btn btn-danger btn-transparent">Danger</button>
<button type="button" class="btn btn-success btn-transparent">Success</button>
<button type="button" class="btn btn-warning btn-transparent">warning</button>
<button type="button" class="btn btn-info btn-transparent">Info</button>
<button type="button" class="btn btn-dark btn-transparent">Dark</button>
<button type="button" class="btn btn-primary light btn-transparent">Primary</button>
<button type="button" class="btn btn-secondary light btn-transparent">Secondary</button>
<button type="button" class="btn btn-danger light btn-transparent">Danger</button>
<button type="button" class="btn btn-success light btn-transparent">Success</button>
<button type="button" class="btn btn-warning light btn-transparent">warning</button>
<button type="button" class="btn btn-info light btn-transparent">Info</button>
<button type="button" class="btn btn-dark light btn-transparent">Dark</button>
Disabled Button
Default button style
disabled="disabled"
to change the style
<button type="button" class="btn btn-rounded btn-primary btn-md " disabled="disabled">Primary</button>
<button type="button" class="btn btn-rounded btn-dark btn-md " disabled="disabled">Secondary</button>
Square Buttons
add .btn-square
to change the
style
Medium Button
Small Button
<button type="button" class="btn btn-square btn-primary me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-primary light me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-outline-light"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
</div<
<button type="button" class="btn btn-square btn-primary rounded-circle me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-primary rounded-circle light me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-outline-light rounded-circle"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-primary rounded-0 me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-primary rounded-0 light me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-outline-light rounded-0"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-md btn-info me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-md btn-info light me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M18.4375 7.22876V16.5625C18.437 17.0596 18.2393 17.5363 17.8878 17.8878C17.5363 18.2393 17.0596 18.437 16.5625 18.4375H13.4375C13.106 18.4375 12.788 18.3058 12.5536 18.0714C12.3192 17.837 12.1875 17.519 12.1875 17.1875V13.75C12.1875 13.5842 12.1217 13.4253 12.0044 13.3081C11.8872 13.1909 11.7283 13.125 11.5625 13.125H8.4375C8.27174 13.125 8.11277 13.1909 7.99556 13.3081C7.87835 13.4253 7.8125 13.5842 7.8125 13.75V17.1875C7.8125 17.519 7.6808 17.837 7.44638 18.0714C7.21196 18.3058 6.89402 18.4375 6.5625 18.4375H3.4375C2.94037 18.437 2.46375 18.2393 2.11222 17.8878C1.7607 17.5363 1.563 17.0596 1.5625 16.5625V7.22876C1.56297 7.01291 1.61906 6.80082 1.72536 6.61296C1.83166 6.4251 1.98458 6.26781 2.16937 6.15626L9.35687 1.84376C9.55118 1.72713 9.77354 1.66553 10.0002 1.66553C10.2268 1.66553 10.4491 1.72713 10.6434 1.84376L17.8309 6.15626C18.0157 6.26785 18.1685 6.42516 18.2748 6.61301C18.381 6.80087 18.4371 7.01294 18.4375 7.22876Z" fill="#2AA3E7"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-md btn-outline-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M18.4375 7.22876V16.5625C18.437 17.0596 18.2393 17.5363 17.8878 17.8878C17.5363 18.2393 17.0596 18.437 16.5625 18.4375H13.4375C13.106 18.4375 12.788 18.3058 12.5536 18.0714C12.3192 17.837 12.1875 17.519 12.1875 17.1875V13.75C12.1875 13.5842 12.1217 13.4253 12.0044 13.3081C11.8872 13.1909 11.7283 13.125 11.5625 13.125H8.4375C8.27174 13.125 8.11277 13.1909 7.99556 13.3081C7.87835 13.4253 7.8125 13.5842 7.8125 13.75V17.1875C7.8125 17.519 7.6808 17.837 7.44638 18.0714C7.21196 18.3058 6.89402 18.4375 6.5625 18.4375H3.4375C2.94037 18.437 2.46375 18.2393 2.11222 17.8878C1.7607 17.5363 1.563 17.0596 1.5625 16.5625V7.22876C1.56297 7.01291 1.61906 6.80082 1.72536 6.61296C1.83166 6.4251 1.98458 6.26781 2.16937 6.15626L9.35687 1.84376C9.55118 1.72713 9.77354 1.66553 10.0002 1.66553C10.2268 1.66553 10.4491 1.72713 10.6434 1.84376L17.8309 6.15626C18.0157 6.26785 18.1685 6.42516 18.2748 6.61301C18.381 6.80087 18.4371 7.01294 18.4375 7.22876Z" fill="#2AA3E7"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-info btn-md rounded-circle me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-info btn-md rounded-circle light me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M18.4375 7.22876V16.5625C18.437 17.0596 18.2393 17.5363 17.8878 17.8878C17.5363 18.2393 17.0596 18.437 16.5625 18.4375H13.4375C13.106 18.4375 12.788 18.3058 12.5536 18.0714C12.3192 17.837 12.1875 17.519 12.1875 17.1875V13.75C12.1875 13.5842 12.1217 13.4253 12.0044 13.3081C11.8872 13.1909 11.7283 13.125 11.5625 13.125H8.4375C8.27174 13.125 8.11277 13.1909 7.99556 13.3081C7.87835 13.4253 7.8125 13.5842 7.8125 13.75V17.1875C7.8125 17.519 7.6808 17.837 7.44638 18.0714C7.21196 18.3058 6.89402 18.4375 6.5625 18.4375H3.4375C2.94037 18.437 2.46375 18.2393 2.11222 17.8878C1.7607 17.5363 1.563 17.0596 1.5625 16.5625V7.22876C1.56297 7.01291 1.61906 6.80082 1.72536 6.61296C1.83166 6.4251 1.98458 6.26781 2.16937 6.15626L9.35687 1.84376C9.55118 1.72713 9.77354 1.66553 10.0002 1.66553C10.2268 1.66553 10.4491 1.72713 10.6434 1.84376L17.8309 6.15626C18.0157 6.26785 18.1685 6.42516 18.2748 6.61301C18.381 6.80087 18.4371 7.01294 18.4375 7.22876Z" fill="#2AA3E7"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-outline-light btn-md rounded-circle ">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M18.4375 7.22876V16.5625C18.437 17.0596 18.2393 17.5363 17.8878 17.8878C17.5363 18.2393 17.0596 18.437 16.5625 18.4375H13.4375C13.106 18.4375 12.788 18.3058 12.5536 18.0714C12.3192 17.837 12.1875 17.519 12.1875 17.1875V13.75C12.1875 13.5842 12.1217 13.4253 12.0044 13.3081C11.8872 13.1909 11.7283 13.125 11.5625 13.125H8.4375C8.27174 13.125 8.11277 13.1909 7.99556 13.3081C7.87835 13.4253 7.8125 13.5842 7.8125 13.75V17.1875C7.8125 17.519 7.6808 17.837 7.44638 18.0714C7.21196 18.3058 6.89402 18.4375 6.5625 18.4375H3.4375C2.94037 18.437 2.46375 18.2393 2.11222 17.8878C1.7607 17.5363 1.563 17.0596 1.5625 16.5625V7.22876C1.56297 7.01291 1.61906 6.80082 1.72536 6.61296C1.83166 6.4251 1.98458 6.26781 2.16937 6.15626L9.35687 1.84376C9.55118 1.72713 9.77354 1.66553 10.0002 1.66553C10.2268 1.66553 10.4491 1.72713 10.6434 1.84376L17.8309 6.15626C18.0157 6.26785 18.1685 6.42516 18.2748 6.61301C18.381 6.80087 18.4371 7.01294 18.4375 7.22876Z" fill="#2AA3E7"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-info btn-md rounded-0 me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-info btn-md rounded-0 light me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M18.4375 7.22876V16.5625C18.437 17.0596 18.2393 17.5363 17.8878 17.8878C17.5363 18.2393 17.0596 18.437 16.5625 18.4375H13.4375C13.106 18.4375 12.788 18.3058 12.5536 18.0714C12.3192 17.837 12.1875 17.519 12.1875 17.1875V13.75C12.1875 13.5842 12.1217 13.4253 12.0044 13.3081C11.8872 13.1909 11.7283 13.125 11.5625 13.125H8.4375C8.27174 13.125 8.11277 13.1909 7.99556 13.3081C7.87835 13.4253 7.8125 13.5842 7.8125 13.75V17.1875C7.8125 17.519 7.6808 17.837 7.44638 18.0714C7.21196 18.3058 6.89402 18.4375 6.5625 18.4375H3.4375C2.94037 18.437 2.46375 18.2393 2.11222 17.8878C1.7607 17.5363 1.563 17.0596 1.5625 16.5625V7.22876C1.56297 7.01291 1.61906 6.80082 1.72536 6.61296C1.83166 6.4251 1.98458 6.26781 2.16937 6.15626L9.35687 1.84376C9.55118 1.72713 9.77354 1.66553 10.0002 1.66553C10.2268 1.66553 10.4491 1.72713 10.6434 1.84376L17.8309 6.15626C18.0157 6.26785 18.1685 6.42516 18.2748 6.61301C18.381 6.80087 18.4371 7.01294 18.4375 7.22876Z" fill="#2AA3E7"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-outline-light btn-md rounded-0">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M18.4375 7.22876V16.5625C18.437 17.0596 18.2393 17.5363 17.8878 17.8878C17.5363 18.2393 17.0596 18.437 16.5625 18.4375H13.4375C13.106 18.4375 12.788 18.3058 12.5536 18.0714C12.3192 17.837 12.1875 17.519 12.1875 17.1875V13.75C12.1875 13.5842 12.1217 13.4253 12.0044 13.3081C11.8872 13.1909 11.7283 13.125 11.5625 13.125H8.4375C8.27174 13.125 8.11277 13.1909 7.99556 13.3081C7.87835 13.4253 7.8125 13.5842 7.8125 13.75V17.1875C7.8125 17.519 7.6808 17.837 7.44638 18.0714C7.21196 18.3058 6.89402 18.4375 6.5625 18.4375H3.4375C2.94037 18.437 2.46375 18.2393 2.11222 17.8878C1.7607 17.5363 1.563 17.0596 1.5625 16.5625V7.22876C1.56297 7.01291 1.61906 6.80082 1.72536 6.61296C1.83166 6.4251 1.98458 6.26781 2.16937 6.15626L9.35687 1.84376C9.55118 1.72713 9.77354 1.66553 10.0002 1.66553C10.2268 1.66553 10.4491 1.72713 10.6434 1.84376L17.8309 6.15626C18.0157 6.26785 18.1685 6.42516 18.2748 6.61301C18.381 6.80087 18.4371 7.01294 18.4375 7.22876Z" fill="#2AA3E7"/>
</svg>
</button>
<button type="button" class="btn btn-square btn-sm btn-secondary me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-md btn-secondary light me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"<
<path d="M12.9062 5.06015V11.5938C12.9059 11.9418 12.7675 12.2754 12.5214 12.5215C12.2754 12.7675 11.9417 12.9059 11.5938 12.9063H9.40625C9.17419 12.9063 8.95163 12.8141 8.78753 12.65C8.62344 12.4859 8.53125 12.2633 8.53125 12.0313V9.62503C8.53125 9.509 8.48516 9.39772 8.40311 9.31567C8.32106 9.23362 8.20978 9.18753 8.09375 9.18753H5.90625C5.79022 9.18753 5.67894 9.23362 5.59689 9.31567C5.51484 9.39772 5.46875 9.509 5.46875 9.62503V12.0313C5.46875 12.2633 5.37656 12.4859 5.21247 12.65C5.04837 12.8141 4.82581 12.9063 4.59375 12.9063H2.40625C2.05826 12.9059 1.72462 12.7675 1.47856 12.5215C1.23249 12.2754 1.0941 11.9418 1.09375 11.5938V5.06015C1.09408 4.90906 1.13334 4.7606 1.20775 4.6291C1.28216 4.49759 1.38921 4.38749 1.51856 4.3094L6.54981 1.29066C6.68583 1.20902 6.84148 1.16589 7.00011 1.16589C7.15874 1.16589 7.31439 1.20902 7.45041 1.29066L12.4817 4.3094C12.611 4.38752 12.718 4.49763 12.7923 4.62913C12.8667 4.76063 12.9059 4.90908 12.9062 5.06015Z" fill="#1F2025"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-md btn-outline-light"<
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"<
<path d="M12.9062 5.06015V11.5938C12.9059 11.9418 12.7675 12.2754 12.5214 12.5215C12.2754 12.7675 11.9417 12.9059 11.5938 12.9063H9.40625C9.17419 12.9063 8.95163 12.8141 8.78753 12.65C8.62344 12.4859 8.53125 12.2633 8.53125 12.0313V9.62503C8.53125 9.509 8.48516 9.39772 8.40311 9.31567C8.32106 9.23362 8.20978 9.18753 8.09375 9.18753H5.90625C5.79022 9.18753 5.67894 9.23362 5.59689 9.31567C5.51484 9.39772 5.46875 9.509 5.46875 9.62503V12.0313C5.46875 12.2633 5.37656 12.4859 5.21247 12.65C5.04837 12.8141 4.82581 12.9063 4.59375 12.9063H2.40625C2.05826 12.9059 1.72462 12.7675 1.47856 12.5215C1.23249 12.2754 1.0941 11.9418 1.09375 11.5938V5.06015C1.09408 4.90906 1.13334 4.7606 1.20775 4.6291C1.28216 4.49759 1.38921 4.38749 1.51856 4.3094L6.54981 1.29066C6.68583 1.20902 6.84148 1.16589 7.00011 1.16589C7.15874 1.16589 7.31439 1.20902 7.45041 1.29066L12.4817 4.3094C12.611 4.38752 12.718 4.49763 12.7923 4.62913C12.8667 4.76063 12.9059 4.90908 12.9062 5.06015Z" fill="#1D69D6"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-secondary btn-md rounded-circle me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-secondary btn-md rounded-circle light me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-outline-light btn-md rounded-circle "<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="var(--primary)"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-secondary btn-md rounded-0 me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"<
<path d="M22.125 8.67447V19.875C22.1244 20.4715 21.8872 21.0435 21.4653 21.4653C21.0435 21.8871 20.4716 22.1244 19.875 22.125H16.125C15.7272 22.125 15.3456 21.9669 15.0643 21.6856C14.783 21.4043 14.625 21.0228 14.625 20.625V16.5C14.625 16.3011 14.546 16.1103 14.4053 15.9696C14.2647 15.829 14.0739 15.75 13.875 15.75H10.125C9.92609 15.75 9.73532 15.829 9.59467 15.9696C9.45402 16.1103 9.375 16.3011 9.375 16.5V20.625C9.375 21.0228 9.21696 21.4043 8.93566 21.6856C8.65436 21.9669 8.27282 22.125 7.875 22.125H4.125C3.52845 22.1244 2.9565 21.8871 2.53467 21.4653C2.11284 21.0435 1.8756 20.4715 1.875 19.875V8.67447C1.87556 8.41545 1.94287 8.16095 2.07043 7.93552C2.19799 7.71008 2.3815 7.52133 2.60325 7.38747L11.2282 2.21247C11.4614 2.07252 11.7282 1.9986 12.0002 1.9986C12.2721 1.9986 12.539 2.07252 12.7721 2.21247L21.3971 7.38747C21.6188 7.52138 21.8022 7.71015 21.9297 7.93558C22.0572 8.16101 22.1245 8.41549 22.125 8.67447Z" fill="white"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-secondary btn-md rounded-0 light me-3"<
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"<
<path d="M12.9062 5.06015V11.5938C12.9059 11.9418 12.7675 12.2754 12.5214 12.5215C12.2754 12.7675 11.9417 12.9059 11.5938 12.9063H9.40625C9.17419 12.9063 8.95163 12.8141 8.78753 12.65C8.62344 12.4859 8.53125 12.2633 8.53125 12.0313V9.62503C8.53125 9.509 8.48516 9.39772 8.40311 9.31567C8.32106 9.23362 8.20978 9.18753 8.09375 9.18753H5.90625C5.79022 9.18753 5.67894 9.23362 5.59689 9.31567C5.51484 9.39772 5.46875 9.509 5.46875 9.62503V12.0313C5.46875 12.2633 5.37656 12.4859 5.21247 12.65C5.04837 12.8141 4.82581 12.9063 4.59375 12.9063H2.40625C2.05826 12.9059 1.72462 12.7675 1.47856 12.5215C1.23249 12.2754 1.0941 11.9418 1.09375 11.5938V5.06015C1.09408 4.90906 1.13334 4.7606 1.20775 4.6291C1.28216 4.49759 1.38921 4.38749 1.51856 4.3094L6.54981 1.29066C6.68583 1.20902 6.84148 1.16589 7.00011 1.16589C7.15874 1.16589 7.31439 1.20902 7.45041 1.29066L12.4817 4.3094C12.611 4.38752 12.718 4.49763 12.7923 4.62913C12.8667 4.76063 12.9059 4.90908 12.9062 5.06015Z" fill="#1F2025"/<
</svg<
</button<
<button type="button" class="btn btn-square btn-outline-light btn-md rounded-0"<
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"<
<path d="M12.9062 5.06015V11.5938C12.9059 11.9418 12.7675 12.2754 12.5214 12.5215C12.2754 12.7675 11.9417 12.9059 11.5938 12.9063H9.40625C9.17419 12.9063 8.95163 12.8141 8.78753 12.65C8.62344 12.4859 8.53125 12.2633 8.53125 12.0313V9.62503C8.53125 9.509 8.48516 9.39772 8.40311 9.31567C8.32106 9.23362 8.20978 9.18753 8.09375 9.18753H5.90625C5.79022 9.18753 5.67894 9.23362 5.59689 9.31567C5.51484 9.39772 5.46875 9.509 5.46875 9.62503V12.0313C5.46875 12.2633 5.37656 12.4859 5.21247 12.65C5.04837 12.8141 4.82581 12.9063 4.59375 12.9063H2.40625C2.05826 12.9059 1.72462 12.7675 1.47856 12.5215C1.23249 12.2754 1.0941 11.9418 1.09375 11.5938V5.06015C1.09408 4.90906 1.13334 4.7606 1.20775 4.6291C1.28216 4.49759 1.38921 4.38749 1.51856 4.3094L6.54981 1.29066C6.68583 1.20902 6.84148 1.16589 7.00011 1.16589C7.15874 1.16589 7.31439 1.20902 7.45041 1.29066L12.4817 4.3094C12.611 4.38752 12.718 4.49763 12.7923 4.62913C12.8667 4.76063 12.9059 4.90908 12.9062 5.06015Z" fill="#1D69D6"/<
</svg<
</button<
Button Block
add .btn-square
to change the
style
<button type="button" class="btn btn-primary light btn-sm border-0">Small</button>
<button type="button" class="btn btn-outline-primary">Medium</button>
<button type="button" class="btn btn-primary btn-lg ">Large</button>
Social Sign in Buttons
add
.btn-rounded
to change the style