Buttons | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Buttons

##### Flat Buttons

Use`btn-square` class for square button.

    <div class="card-body common-flex">
     <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>
    </div>

##### Default Buttons

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

    <div class="card-body common-flex">
     <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>
    </div>

##### Button Sizes

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

    <div class="card-body common-flex align-items-center buttons-box">
     <button class="btn button-light-primary btn-lg rounded-es-lg">Large button</button>
     <button class="btn button-light-secondary rounded-es-lg">Default button</button>
     <button class="btn button-light-warning btn-sm rounded-es-lg">Small button</button>
     <button class="btn button-light-success btn-xs rounded-es-md">Extra small button</button>
    </div>

##### Outline Button Sizes

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

    <div class="card-body common-flex align-items-center">
     <button class="btn btn-outline-primary btn-lg rounded-es-lg">Large button</button>
     <button class="btn btn-outline-secondary rounded-es-lg">Default button</button>
     <button class="btn btn-outline-warning btn-sm rounded-es-lg">Small button</button>
     <button class="btn btn-outline-success btn-xs rounded-es-md">Extra small button</button>
    </div>

##### Rounded Buttons

Use`btn-pill` class for rounded buttons.

    <div class="card-body common-flex buttons-box">
     <button class="btn btn-pill button-light-primary">Contacts</button>
     <button class="btn btn-pill button-light-dark">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>
    </div>

##### Outline Rounded Buttons

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

    <div class="card-body common-flex">
     <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>
    </div>

##### Rounded Sizes

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

    <div class="card-body common-flex align-items-center">
     <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>
    </div>

##### Outline Rounded Sizes

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

    <div class="card-body common-flex align-items-center">
     <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>
    </div>

##### 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 `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-solid fa-arrows-rotate fa-spin"></i></button>
     <button class="btn border-dashed-success">Compiling Request...<i class="fa-solid fa-spinner fa-spin-pulse"></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">Ripple Button</button>
    </div>

##### Button Groups

Wrap a series of buttons with `btn` in `btn-group` and 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="grid.grid-cols-12 g-3">
       <div class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6">
         <div class="card-wrapper custom-border rounded-3 h-full">
           <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-span-4 xxl:col-span-6 md:col-span-12 box-col-6">
         <div class="card-wrapper custom-border rounded-3 h-full">
           <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 custom-border rounded-3 h-full">
           <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="grid.grid-cols-12 gap-3">
       <div class="col-span-12">
         <div class="card-wrapper custom-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-span-12">
         <div class="card-wrapper custom-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-span-12">
         <div class="card-wrapper custom-border rounded-3">
           <h6 class="sub-title fw-bold">Button End</h6>
           <div class="d-grid gap-2 flex 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 Variations

Radio 1 Radio 2 Radio 3

###### Horizontal Variations

Checkbox 1 Checkbox 2 Checkbox 3

###### Button Toolbar

    <div class="card-body">
     <div class="grid grid-cols-12 gap-3">
       <div class="col-span-6 xxl:col-span-12">
         <div class="card-wrapper custom-border rounded-3 h-full">
           <h6 class="sub-title fw-bold">Vertical Variations</h6>
           <div class="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-span-6 xxl:col-span-12">
         <div class="grid grid-cols-12 gap-3">
           <div class="col-span-12 xl:col-span-6 sm:col-span-12 ">
             <div class="card-wrapper custom-border rounded-3 h-full">
               <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">C </button>
                   <button class="btn btn-warning" type="button">U</button>
                   <button class="btn btn-primary" type="button">B </button>
                   <button class="btn btn-warning" type="button">A</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-span-12 xl:col-span-6 sm:col-span-12 ">
             <div class="card-wrapper custom-border rounded-3 h-full">
               <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 `btn-outline-*-2x` class for bold outline buttons.

    <div class="card-body common-flex">
     <button class="btn btn-outline-primary-2x">Animation</button>
     <button class="btn btn-outline-secondary-2x">Icons</button>
     <button class="btn btn-outline-success-2x">Blog</button>
     <button class="btn btn-outline-info-2x">Widgets</button>
     <button class="btn btn-outline-warning-2x">Chat</button>
     <button class="btn btn-outline-danger-2x">Users</button>
     <button class="btn btn-outline-light-2x txt-dark">FAQ</button>
    </div>

##### Radio-checkbox Groups and Animated Buttons

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

###### Radio Buttons

Theme
E-commerce

###### Checkbox Buttons

Theme
E-commerce

###### Animated Buttons

    <div class="card-body">
     <div class="grid grid-cols-12 gap-3">
       <div class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50">
         <div class="card-wrapper custom-border rounded-3 bg-light">
           <h6 class="sub-title fw-bold">Radio Buttons</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-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50">
         <div class="card-wrapper custom-border rounded-3 bg-light">
           <h6 class="sub-title fw-bold">Checkbox Buttons</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-span-4 xxl:col-span-6 md:col-span-12 box-col-12 xl-100">
         <div class="card-wrapper custom-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>
    </div>

##### Radial Buttons

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

###### Default Gradient Buttons

###### Flat Gradient Buttons

###### Rounded Gradient Buttons

    <div class="card-body">
     <div class="grid grid-cols-12 gap-3">
       <div class="col-span-4 xl:col-span-6 sm:col-span-12">
         <div class="card-wrapper custom-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-span-4 xl:col-span-6 sm:col-span-12">
         <div class="card-wrapper custom-border rounded-3 bg-light">
           <h6 class="sub-title fw-bold">Flat 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-span-4 xl:col-span-12">
         <div class="card-wrapper custom-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>
    </div>