Loading...

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

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

Buy now !

### Raised Buttons

##### Default buttons

Add `.btn-pill` and `.btn-air-*` class for raised button

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

##### Large buttons

Add `.btn-pill`,`.btn-air-*` and `.btn-lg` class for large button

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-lg">Primary button</button>
    <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-lg">Secondary button</button>
    <button type="button" class="btn btn-pill btn-success btn-air-success btn-lg">Success button</button>
    <button type="button" class="btn btn-pill btn-info btn-air-info btn-lg">Info button</button>
    <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-lg">Warning button</button>
    <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-lg">Danger button</button>
    <button type="button" class="btn btn-pill btn-light btn-air-light btn-lg">Light button</button>
    <!-- Cod Box Copy end -->

##### Small buttons

Add `.btn-pill`,`.btn-air-*` and `.btn-sm` class for small button

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-sm">Primary button</button>
    <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-sm">Secondary button</button>
    <button type="button" class="btn btn-pill btn-success btn-air-success btn-sm">Success button</button>
    <button type="button" class="btn btn-pill btn-info btn-air-info btn-sm">Info button</button>
    <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-sm">Warning button</button>
    <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-sm">Danger button</button>
    <button type="button" class="btn btn-pill btn-light btn-air-light btn-sm">Light button</button>
    <!-- Cod Box Copy end -->

##### Extra Small buttons

Add `.btn-pill`,`.btn-air-*` and `.btn-xs` class for extra small button

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-xs">Primary button</button>
    <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-xs">Secondary button</button>
    <button type="button" class="btn btn-pill btn-success btn-air-success btn-xs">Success button</button>
    <button type="button" class="btn btn-pill btn-info btn-air-info btn-xs">Info button</button>
    <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-xs">Warning button</button>
    <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-xs">Danger button</button>
    <button type="button" class="btn btn-pill btn-light btn-air-light btn-xs">Light button</button>
    <!-- Cod Box Copy end -->

##### Active Buttons

Add `.active` for active state

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-primary btn-air-primary active">Active</button>
    <button type="button" class="btn btn-pill btn-secondary btn-air-secondary active">Active</button>
    <button type="button" class="btn btn-pill btn-success btn-air-success active">Active</button>
    <button type="button" class="btn btn-pill btn-info btn-air-info active">Active</button>
    <button type="button" class="btn btn-pill btn-warning btn-air-warning active">Active</button>
    <button type="button" class="btn btn-pill btn-danger btn-air-danger active">Active</button>
    <button type="button" class="btn btn-pill btn-light btn-air-light active txt-dark">Active</button>
    <!-- Cod Box Copy end -->

##### Disabled buttons

Add `.disabled` class or `disabled="disabled"` attribute for disabled button

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-primary btn-air-primary disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-secondary btn-air-secondary disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-success btn-air-success disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-info btn-air-info disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-warning btn-air-warning disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-danger btn-air-danger disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-light btn-air-light disabled txt-dark">Disabled</button>
    <!-- Cod Box Copy end -->

##### Custom state buttons

The `.btn` class used with `<button>`, `<a>` and `<input>` elements.
Link

    <!-- Cod Box Copy begin -->
    <a class="btn btn-pill btn-primary btn-air-primary" href="#" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
    <input class="btn btn-pill btn-primary btn-air-primary" type="button" value="Input"  data-bs-toggle="tooltip;" title="btn btn-secondary">
    <input class="btn btn-pill btn-success btn-air-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success">
    <button class="btn btn-pill btn-info btn-air-info" type="submit">Button</button>
    <!-- Cod Box Copy end -->

##### outline buttons

Add `.btn-pill`,`.btn-air-*` and `.btn-outline-*` class for button with outline

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary">Primary button</button>
    <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary">Secondary button</button>
    <button type="button" class="btn btn-pill btn-outline-success btn-air-success">Success button</button>
    <button type="button" class="btn btn-pill btn-outline-info btn-air-info">Info button</button>
    <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning">Warning button</button>
    <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger">Danger button</button>
    <button type="button" class="btn btn-pill btn-outline-light btn-air-light txt-dark">Light button</button>
    <!-- Cod Box Copy end -->

##### bold Border outline buttons

Add `.btn-pill`,`.btn-air-*` and `.btn-outline-*-2x` class for button with bold outline

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-outline-primary-2x btn-air-primary">Primary button</button>
    <button type="button" class="btn btn-pill btn-outline-secondary-2x btn-air-secondary">Secondary button</button>
    <button type="button" class="btn btn-pill btn-outline-success-2x btn-air-success">Success button</button>
    <button type="button" class="btn btn-pill btn-outline-info-2x btn-air-info">Info button</button>
    <button type="button" class="btn btn-pill btn-outline-warning-2x btn-air-warning">Warning button</button>
    <button type="button" class="btn btn-pill btn-outline-danger-2x btn-air-danger">Danger button</button>
    <button type="button" class="btn btn-pill btn-outline-light-2x btn-air-light txt-dark">Light button</button>
    <!-- Cod Box Copy end -->

##### outline Large buttons

`.btn-pill`,`.btn-air-*`,`.btn-outline-*` and `.btn-lg` class for large button with outline

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary btn-lg">Primary button</button>
    <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary btn-lg">Secondary button</button>
    <button type="button" class="btn btn-pill btn-outline-success btn-air-success btn-lg">Success button</button>
    <button type="button" class="btn btn-pill btn-outline-info btn-air-info btn-lg">Info button</button>
    <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning btn-lg">Warning button</button>
    <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger btn-lg">Danger button</button>
    <button type="button" class="btn btn-pill btn-outline-light btn-air-light btn-lg txt-dark">Light button</button>
    <!-- Cod Box Copy end -->

##### outline small buttons

`.btn-pill`,`.btn-air-*`,`.btn-outline-*` and `.btn-sm` class for small button with outline

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary btn-sm">Primary button</button>
    <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary btn-sm">Secondary button</button>
    <button type="button" class="btn btn-pill btn-outline-success btn-air-success btn-sm">Success button</button>
    <button type="button" class="btn btn-pill btn-outline-info btn-air-info btn-sm">Info button</button>
    <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning btn-sm">Warning button</button>
    <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger btn-sm">Danger button</button>
    <button type="button" class="btn btn-pill btn-outline-light btn-air-light btn-sm txt-dark">Light button</button>
    <!-- Cod Box Copy end -->

##### outline extra small buttons

`.btn-pill`,`.btn-air-*`,`.btn-outline-*` and `.btn-xs` class for extra small button with outline

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary btn-xs">Primary button</button>
    <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary btn-xs">Secondary button</button>
    <button type="button" class="btn btn-pill btn-outline-success btn-air-success btn-xs">Success button</button>
    <button type="button" class="btn btn-pill btn-outline-info btn-air-info btn-xs">Info button</button>
    <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning btn-xs">warning button</button>
    <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger btn-xs">Danger button</button>
    <button type="button" class="btn btn-pill btn-outline-light btn-air-light btn-xs txt-dark">Light button</button>
    <!-- Cod Box Copy end -->

##### Disabled outline buttons

Add `.disabled` class or `disabled="disabled"` attribute for disabled button

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-outline-success btn-air-success disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-outline-info btn-air-info disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger disabled">Disabled</button>
    <button type="button" class="btn btn-pill btn-outline-light btn-air-light disabled txt-dark">Disabled</button>
    <!-- Cod Box Copy end -->

##### Gradien buttons

`.btn-pill`,`.btn-air-*`,`.btn-*` and `.btn-*-gradien` class for gradien button

    <!-- Cod Box Copy begin -->
    <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-primary-gradien">Primary button</button>
    <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-secondary-gradien">Secondary button</button>
    <button type="button" class="btn btn-pill btn-success btn-air-success btn-success-gradien">Success button</button>
    <button type="button" class="btn btn-pill btn-info btn-air-info btn-info-gradien">Info button</button>
    <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-warning-gradien">warning button</button>
    <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-danger-gradien">Danger button</button>
    <button type="button" class="btn btn-pill btn-light btn-air-light btn-light-gradien txt-dark">Light button</button>
    <!-- Cod Box Copy end -->