Default Style

Flat Buttons

Use btn-square class for square button.

<!-- Code Box Copy begin -->
<button class="btn btn-square btn-primary">Primary Button</button>
<button class="btn btn-square btn-secondary">Secondary Button</button>
<button class="btn btn-square btn-success">Success Button</button>
<button class="btn btn-square btn-info">Info Button</button>
<button class="btn btn-square btn-warning">Warning Button</button>
<button class="btn btn-square btn-danger">Danger Button</button>
<button class="btn btn-square btn-light">Light Button</button>
<!-- Code Box Copy end -->

Default Buttons

Use btn class to set default buttons and set background color like this : bg-* [primary/secondary..]. 

<button class="btn btn-primary" type="button" data-bs-toggle="tooltip" title="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" title="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success" type="button" data-bs-toggle="tooltip" title="btn btn-success">Success Button</button>
<button class="btn btn-info" type="button" data-bs-toggle="tooltip" title="btn btn-info">Info Button</button>
<button class="btn btn-warning" type="button" data-bs-toggle="tooltip" title="btn btn-warning">Warning Button</button>
<button class="btn btn-danger" type="button" data-bs-toggle="tooltip" title="btn btn-danger">Danger Button</button>
<button class="btn btn-light" type="button" data-bs-toggle="tooltip" title="btn btn-light">Light Button</button>

Button Sizes

Use btn-lg, btn-sm, btn-xs for sizes of buttons

<button class="btn button-light-primary btn-lg b-r-8">Large button</button>
<button class="btn button-light-secondary b-r-8">Default button</button>
<button class="btn button-light-warning btn-sm b-r-8">Small button </button>
<button class="btn button-light-success btn-xs b-r-6">Extra small button</button>

Outline Button Sizes

Use button-lg, button-sm, and button-xs for size, and use the "outline-*" class for outline color.

<!-- Cod Box Copy begin -->
<button class="btn btn-outline-primary btn-lg b-r-8">Large button</button>
<button class="btn btn-outline-secondary b-r-8">Default button</button>
<button class="btn btn-outline-warning btn-sm b-r-8">Small button </button>
<button class="btn btn-outline-success btn-xs b-r-6">Extra small button</button>
<!-- Cod Box Copy end -->

Rounded Buttons

Use btn-pill class for rounded buttons.

<!-- Cod Box Copy begin -->
<button class="btn btn-pill button-light-primary">Contacts </button>
<button class="btn btn-pill button-light-secondary">Users</button>
<button class="btn btn-pill button-light-success">Chats</button>
<button class="btn btn-pill button-light-info">Animation</button>
<button class="btn btn-pill button-light-warning">Widgets</button>
<button class="btn btn-pill button-light-danger">Project</button>
<button class="btn btn-pill button-light-light">Icons</button> 
<!-- Cod Box Copy end -->

Outline Rounded Buttons

Use btn-pill and btn-outline-* class for outline with buttons.

<!-- Cod Box Copy begin -->
<button class="btn btn-pill btn-outline-primary">Contacts </button>
<button class="btn btn-pill btn-outline-secondary">Users</button>
<button class="btn btn-pill btn-outline-success">Chats</button>
<button class="btn btn-pill btn-outline-info">Animation</button>
<button class="btn btn-pill btn-outline-warning">Widgets</button>
<button class="btn btn-pill btn-outline-danger">Project</button>
<button class="btn btn-pill btn-outline-light">Icons</button>
<!-- Cod Box Copy end -->

Rounded Sizes

Use btn-lg, btn-sm, btn-xs for sizes of buttons

<!-- Cod Box Copy begin -->
<button class="btn btn-pill btn-primary btn-lg">Large button</button>
<button class="btn btn-pill btn-secondary">Default button</button>
<button class="btn btn-pill btn-warning btn-sm">Small button </button>
<button class="btn btn-pill btn-success btn-xs">Extra small button</button>
<!-- Cod Box Copy end -->

Outline Rounded Sizes

Use btn-lg, btn-sm, btn-xs for sizes of buttons

<!-- Cod Box Copy begin -->
<button class="btn btn-pill btn-outline-primary btn-lg">Large button</button>
<button class="btn btn-pill btn-outline-secondary">Default button</button>
<button class="btn btn-pill btn-outline-warning btn-sm">Small button </button>
<button class="btn btn-pill btn-outline-success btn-xs">Extra small button</button>
<!-- Cod Box Copy end -->

Disabled Buttons

Use disabled class or disabled="disabled" attribute for disabled button

<div class="card-body common-flex">
 <button class="btn btn-primary disabled" type="button">I'm disabled</button>
 <button class="btn btn-pill btn-warning disabled" type="button">Having problems</button>
 <button class="btn btn-outline-primary disabled" type="button">Inaccessible</button>
 <button class="btn btn-pill btn-outline-warning disabled" type="button">Disabled</button>
</div>

Icons Buttons

Use btn-square and btn-pill class for icons buttons.

<div class="card-body common-flex visual-button">
 <button class="btn b-ln-height btn-primary btn-square"><i data-feather="help-circle"></i></button>
 <button class="btn b-ln-height btn-secondary btn-square"><i data-feather="clock"></i></button>
 <button class="btn b-ln-height btn-warning"><i data-feather="loader"></i></button>
 <button class="btn b-ln-height button-light-primary"><i data-feather="radio"></i></button>
 <button class="btn-pill button-light-secondary"><i data-feather="loader"></i></button>
 <button class="btn-pill button-light-warning"><i data-feather="radio"></i></button>
 <button class="btn b-ln-height btn-outline-primary"><i data-feather="radio"></i></button>
 <button class="btn-pill btn-outline-secondary border border-secondary"><i data-feather="loader"></i></button>
 <button class="btn-pill btn-outline-warning border border-warning"><i data-feather="radio"></i></button>
</div>

Icons with Title Buttons

Use btn-square , btn-pill , button-light-* , btn-* , .btn-outline-* , border-* for icons with title buttons.

<div class="card-body common-flex visual-button visual-button1">
 <button class="btn b-ln-height btn-secondary btn-square"><i data-feather="clock"></i><span>Secondary</span></button>
 <button class="btn b-ln-height btn-warning"><i data-feather="alert-triangle"></i><span>Warning</span></button>
 <button class="btn-pill button-light-success"><i data-feather="check-square"></i><span>Success</span></button>
 <button class="btn b-ln-height btn-outline-info"><i data-feather="volume-1"></i><span>Info</span></button>
 <button class="btn-pill btn-outline-primary border border-primary"><i data-feather="loader"></i><span>Primary</span></button>
</div>

Dashed Border

Use border-dashed-* & txt-* for dashed border.

<div class="card-body common-flex">
 <button class="btn border-dashed-primary">Primary</button>
 <button class="btn border-dashed-secondary">Secondary</button>
 <button class="btn border-dashed-success">Success</button>
 <button class="btn border-dashed-info">Info</button>
 <button class="btn border-dashed-warning">Warning</button>
 <button class="btn border-dashed-danger">Danger</button>
 <button class="btn border-dashed-dark">Dark</button>
</div>

Loader Buttons

Use the border-dashed-* & loader-buttons for loader buttons.

<div class="card-body common-flex loader-buttons">
 <button class="btn border-dashed-primary">Initiating Connection...<i class="fa fa-spin fa-circle-o-notch"></i></button>
 <button class="btn border-dashed-secondary">Spooling Data...<i class="fa fa-spin fa-refresh"></i></button>
 <button class="btn border-dashed-success">Compiling Request...<i class="fa fa-spin fa-spinner"></i></button>
</div>

Ripple Button

Use ripple-button for ripple animation button.

<div class="card-body common-flex ripple-button">
 <button class="btn btn-primary">Ripple Button</button>
</div>

Button Group

Wrap a series of buttons with btn in btn-group & for custom class used for sizes: btn-lg & btn-sm.

Button Group Variation
Outline Button Group
Button Group Sizes
<div class="card-body btn-groups">
 <div class="row g-3">
   <div class="col-xxl-4 col-md-6 box-col-6">
     <div class="card-wrapper border rounded-3 h-100">
       <h6 class="sub-title fw-bold">Button Group Variation</h6>
       <div class="button-wrapper button-variation">
         <div class="btn-group btn-group-square" role="group" aria-label="Basic example">
           <button class="btn btn-primary" type="button">Left</button>
           <button class="btn button-light-primary" type="button">Middle</button>
           <button class="btn btn-primary" type="button">Right</button>
         </div>
         <div class="btn-group btn-group-pill" role="group" aria-label="Basic example">
           <button class="btn button-light-primary" type="button">Left</button>
           <button class="btn btn-primary" type="button">Middle</button>
           <button class="btn button-light-primary" type="button">Right</button>
         </div>
         <div class="btn-group" role="group" aria-label="Basic example">
           <button class="btn btn-primary" type="button">Left</button>
           <button class="btn button-light-primary" type="button">Middle</button>
           <button class="btn btn-primary" type="button">Right</button>
         </div>
       </div>
     </div>
   </div>
   <div class="col-xxl-4 col-md-6 box-col-6">
     <div class="card-wrapper border rounded-3 h-100">
       <h6 class="sub-title fw-bold">Outline Button Group</h6>
       <div class="button-wrapper button-outlined">
         <div class="btn-group btn-group-square" role="group" aria-label="Basic outlined example">
           <button class="btn btn-outline-primary" type="button"><i data-feather="arrow-left"></i></button>
           <button class="btn btn-outline-primary" type="button"><i data-feather="arrow-up"></i></button>
           <button class="btn btn-outline-primary" type="button"><i data-feather="arrow-right"></i></button>
         </div>
         <div class="btn-group btn-group-pill" role="group" aria-label="Basic outlined example">
           <button class="btn btn-outline-primary" type="button"><i data-feather="arrow-left-circle"></i></button>
           <button class="btn btn-outline-primary" type="button"><i data-feather="arrow-up-circle"></i></button>
           <button class="btn btn-outline-primary" type="button"><i data-feather="arrow-right-circle"></i></button>
         </div>
         <div class="btn-group" role="group" aria-label="Basic outlined example">
           <button class="btn btn-outline-primary" type="button"><i data-feather="align-left"></i></button>
           <button class="btn btn-outline-primary" type="button"><i data-feather="align-center"></i></button>
           <button class="btn btn-outline-primary" type="button"><i data-feather="align-right"></i></button>
         </div>
       </div>
     </div>
   </div>
   <div class="col-xxl-4 col-12 box-col-12">
     <div class="card-wrapper border rounded-3 h-100">
       <h6 class="sub-title fw-bold">Button Group Sizes</h6>
       <div class="button-wrapper">
         <div class="btn-group" role="group" aria-label="Large button group">
           <button class="btn btn-outline-primary btn-lg" type="button">Left</button>
           <button class="btn btn-outline-primary btn-lg" type="button">Middle</button>
           <button class="btn btn-outline-primary btn-lg" type="button">Right</button>
         </div>
         <div class="btn-group" role="group" aria-label="Default button group">
           <button class="btn btn-outline-primary" type="button">Left</button>
           <button class="btn btn-outline-primary" type="button">Middle</button>
           <button class="btn btn-outline-primary" type="button">Right</button>
         </div>
         <div class="btn-group" role="group" aria-label="Small buttongroup">
           <button class="btn btn-outline-primary btn-sm" type="button">Left</button>
           <button class="btn btn-outline-primary btn-sm" type="button">Middle</button>
           <button class="btn btn-outline-primary btn-sm" type="button">Right</button>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>

Block Level Buttons

Use btn class for buttons and d-grid used for block level buttons.

Block Button
Button Center
Button End
<div class="card-body">
 <div class="row g-3">
   <div class="col-12">
     <div class="card-wrapper border rounded-3">
       <h6 class="sub-title fw-bold">Block Button</h6>
       <div class="d-grid gap-2 buttons-box">
         <button class="btn button-light-primary" type="button">Click here, there is a big surprise with you, Hurry Up!!</button>
         <button class="btn btn-primary" type="button">40% off all B-Stock Sale!! Hurry Up!!</button>
       </div>
     </div>
   </div>
   <div class="col-12">
     <div class="card-wrapper border rounded-3">
       <h6 class="sub-title fw-bold">Button Center</h6>
       <div class="d-grid gap-2 col-6 mx-auto buttons-box">
         <button class="btn button-light-primary" type="button">Center Button</button>
         <button class="btn btn-primary" type="button">Center Button</button>
       </div>
     </div>
   </div>
   <div class="col-12">
     <div class="card-wrapper border rounded-3">
       <h6 class="sub-title fw-bold">Button End</h6>
       <div class="d-grid gap-2 d-md-flex justify-content-md-end buttons-box">
         <button class="btn button-light-primary me-md-2" type="button">Cancel</button>
         <button class="btn btn-primary" type="button">Submit</button>
       </div>
     </div>
   </div>
 </div>
</div>

Button Variations

Use btn class used for buttons and btn-group-vertical for vertical buttons and made different types of design using btn-group.

Vertical Variation
Horizontal Variation
Button Toolbar
<div class="card-body">
 <div class="row g-3">
   <div class="col-xxl-6">
     <div class="card-wrapper border rounded-3 h-100">
       <h6 class="sub-title fw-bold">Vertical Variations</h6>
       <div class="d-flex gap-3 align-items-end flex-wrap">
         <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
           <button class="btn btn-primary" type="button">Primary</button>
           <button class="btn btn-secondary" type="button">Secondary</button>
           <button class="btn btn-success" type="button">Success</button>
           <button class="btn btn-danger" type="button">Danger</button>
           <button class="btn btn-warning" type="button">Warning</button>
         </div>
         <div class="btn-group-vertical buttons-box" role="group" aria-label="Vertical button group">
           <button class="btn button-light-primary" type="button">Light-primary</button>
           <button class="btn button-light-dark" type="button">Light-dark</button>
           <div class="btn-group" role="group">
             <button class="btn button-light-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Light-success</button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
             </ul>
           </div>
           <div class="btn-group dropstart" role="group">
             <button class="btn button-light-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Light-danger</button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
             </ul>
           </div>
           <div class="btn-group dropend" role="group">
             <button class="btn button-light-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Light-warning</button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
             </ul>
           </div>
           <div class="btn-group dropup" role="group">
             <button class="btn button-light-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Light-info</button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
               <li><a class="dropdown-item" href="#">Dropdown link</a></li>
             </ul>
           </div>
         </div>
         <div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
           <input class="btn-check" id="vbtn-radio1" type="radio" name="vbtn-radio" checked="">
           <label class="btn btn-outline-primary" for="vbtn-radio1">Radio 1</label>
           <input class="btn-check" id="vbtn-radio2" type="radio" name="vbtn-radio">
           <label class="btn btn-outline-primary" for="vbtn-radio2">Radio 2</label>
           <input class="btn-check" id="vbtn-radio3" type="radio" name="vbtn-radio">
           <label class="btn btn-outline-primary mb-0" for="vbtn-radio3">Radio 3</label>
         </div>
       </div>
     </div>
   </div>
   <div class="col-xxl-6">
     <div class="row g-3">
       <div class="col-xl-12 col-sm-6">
         <div class="card-wrapper border rounded-3 h-100">
           <h6 class="sub-title fw-bold">Horizontal Variations</h6>
           <div class="button-wrapper button-box">
             <div class="btn-group" role="group" aria-label="Default button group">
               <button class="btn btn-outline-primary" type="button">How</button>
               <button class="btn btn-outline-primary" type="button">Are</button>
               <button class="btn btn-outline-primary" type="button">You?</button>
             </div>
             <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
               <button class="btn btn-primary" type="button">M </button>
               <button class="btn btn-warning" type="button">O</button>
               <button class="btn btn-primary" type="button">F </button>
               <button class="btn btn-warning" type="button">I</button>
               <div class="btn-group" role="group">
                 <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</button>
                 <ul class="dropdown-menu">
                   <li><a class="dropdown-item" href="#">Gallery</a></li>
                   <li><a class="dropdown-item" href="#">Blog</a></li>
                 </ul>
               </div>
             </div>
             <div class="btn-group select-checkbox" role="group" aria-label="Basic checkbox toggle button group">
               <input class="btn-check" id="btncheck1" type="checkbox">
               <label class="btn btn-outline-success mb-0" for="btncheck1">Checkbox 1</label>
               <input class="btn-check" id="btncheck2" type="checkbox">
               <label class="btn btn-outline-primary mb-0" for="btncheck2">Checkbox 2</label>
               <input class="btn-check" id="btncheck3" type="checkbox">
               <label class="btn btn-outline-success mb-0" for="btncheck3">Checkbox 3</label>
             </div>
           </div>
         </div>
       </div>
       <div class="col-xl-12 col-sm-6">
         <div class="card-wrapper border rounded-3 h-100">
           <h6 class="sub-title fw-bold">Button Toolbar</h6>
           <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
             <div class="btn-group" role="group" aria-label="First group">
               <button class="btn btn-primary" type="button">I </button>
               <button class="btn btn-warning" type="button">II </button>
               <button class="btn btn-primary" type="button">III</button>
               <button class="btn btn-warning" type="button">IV </button>
             </div>
             <div class="btn-group" role="group" aria-label="Second group">
               <button class="btn btn-primary" type="button">V </button>
               <button class="btn btn-warning" type="button">VI </button>
               <button class="btn btn-primary" type="button">VII</button>
             </div>
             <div class="btn-group" role="group" aria-label="Third group">
               <button class="btn btn-warning" type="button">VIII</button>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>

Bold Border Outline Buttons

Use the btn-outline-*-2x class for bold outline buttons.

<!-- Cod Box Copy begin -->
<button class="btn btn-outline-primary-2x">primary button</button>
<button class="btn btn-outline-secondary-2x">secondary button</button>
<button class="btn btn-outline-success-2x">Success button</button>
<button class="btn btn-outline-info-2x">Info button</button>
<button class="btn btn-outline-warning-2x">warning button</button>
<button class="btn btn-outline-danger-2x">danger button</button>
<button class="btn btn-outline-light-2x txt-dark">light button</button> 
<!-- Cod Box Copy end

Radio-checkbox Groups and Animated Buttons

Use radio for radio class & checkbox for checkbox class used.

Radio Buttons
Checkbox Buttons
Animated Buttons
<!-- Cod Box Copy begin -->
<div class="row g-3">
  <div class="col-xl-4 col-md-6 box-col-6 xl-50">
    <div class="card-wrapper border rounded-3 bg-light">
      <h6 class="sub-title fw-bold">Radio Button</h6>
      <div class="btn-radio">
        <div class="btn-group" data-bs-toggle="buttons">
          <div class="btn button-light-primary">
            <div class="radio radio-primary">
              <input id="radio7" type="radio" name="radio1" value="option1">
              <label class="mb-0" for="radio7">Theme</label>
            </div>
          </div>
          <div class="btn button-light-primary">
            <div class="radio radio-primary">
              <input id="radio8" type="radio" name="radio1" value="option1" checked="">
              <label class="mb-0" for="radio8">E-commerce</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-md-6 box-col-6 xl-50">
    <div class="card-wrapper border rounded-3 bg-light">
      <h6 class="sub-title fw-bold">Checkbox</h6>
      <div class="btn-group btn-option" data-bs-toggle="buttons">
        <div class="btn button-light-dark">
          <div class="checkbox checkbox-dark">
            <input id="checkbox-primary-1" type="checkbox">
            <label class="mb-0" for="checkbox-primary-1">Theme</label>
          </div>
        </div>
        <div class="btn button-light-dark">
          <div class="checkbox checkbox-dark">
            <input id="checkbox-primary-2" type="checkbox">
            <label class="mb-0" for="checkbox-primary-2">E-commerce</label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 box-col-12 xl-100">
    <div class="card-wrapper border rounded-3 bg-light">
      <h6 class="sub-title fw-bold">Animated Buttons</h6>
      <div class="common-flex mix-hover-btn">
        <button class="btn btn-border-pop btn-primary">FAQ</button>
        <button class="btn btn-bg-slide button-light-primary">Blog</button>
        <button class="btn btn-border-bottom button-light-primary txt-dark">Icons</button>
        <button class="button button--winona button--border-thin button--round-s" data-text="Open Project">
          <span>Open Project</span>
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Cod Box Copy end -->

Radial Buttons

You can used btn-*-gradien class for gradien buttons.

Default Gradient Buttons
Square Gradient Buttons
Rounded Gradient Buttons
<!-- Cod Box Copy begin -->
<div class="row g-3">
  <div class="col-xl-4 col-md-6">
    <div class="card-wrapper border rounded-3 bg-light">
      <h6 class="sub-title fw-bold">Default gradient buttons</h6>
      <div class="common-flex">
        <button class="btn btn-primary-gradien">Icons</button>
        <button class="btn btn-secondary-gradien">Animation</button>
        <button class="btn btn-success-gradien">Tasks</button>
        <button class="btn btn-info-gradien">Letter box</button>
        <button class="btn btn-warning-gradien">Chat</button>
        <button class="btn btn-danger-gradien">Blog</button>
        <button class="btn btn-light-gradien text-dark">Gallery</button>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-md-6">
    <div class="card-wrapper border rounded-3 bg-light">
      <h6 class="sub-title fw-bold">Square gradient buttons</h6>
      <div class="common-flex">
        <button class="btn btn-square btn-primary-gradien">Icons</button>
        <button class="btn btn-square btn-secondary-gradien">Animation</button>
        <button class="btn btn-square btn-success-gradien">Tasks</button>
        <button class="btn btn-square btn-info-gradien">Letter box</button>
        <button class="btn btn-square btn-warning-gradien">Chat</button>
        <button class="btn btn-square btn-danger-gradien">Blog</button>
        <button class="btn btn-square btn-light-gradien text-dark">Gallery</button>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-sm-12">
    <div class="card-wrapper border rounded-3 bg-light">
      <h6 class="sub-title fw-bold">Rounded gradient buttons</h6>
      <div class="common-flex">
        <button class="btn btn-pill btn-air-primary btn-primary-gradien">Icons</button>
        <button class="btn btn-pill btn-air-secondary btn-secondary-gradien">Animation</button>
        <button class="btn btn-pill btn-air-success btn-success-gradien">Tasks</button>
        <button class="btn btn-pill btn-air-info btn-info-gradien">Letter box</button>
        <button class="btn btn-pill btn-air-warning btn-warning-gradien">Chat</button>
        <button class="btn btn-pill btn-air-danger btn-danger-gradien">Blog</button>
        <button class="btn btn-pill btn-air-light btn-light-gradien txt-dark">Gallery</button>
      </div>
    </div>
  </div>
</div>
<!-- Cod Box Copy end -->