Have a great day at work today ☺

#
Johan Deo
Need Help

+1 234 567 899
help@pixelstrap.com
Visit FAQ

Raised Buttons Universal Admin panel

  2. Buttons
  3. Raised Style
Default buttons
Add .btn-pill and .btn-air-* class for raised button 

<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 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>
Large buttons
Add .btn-pill,.btn-air-* and .btn-lg class for large button 

<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>
Small buttons
Add .btn-pill,.btn-air-* and .btn-sm class for small button 

     <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-danger btn-sm">danger button</button>
Extra Small buttons
Add .btn-pill,.btn-air-* and .btn-xs class for extra small button 

     <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>
Active Buttons
Add .active for active state 

     <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>
Disabled buttons
Add .disabled class or disabled="disabled" attribute for disabled button 

     <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>
Custom state buttons
The .btn class used with <button>, <a> and <input> elements.
Link 

     <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>
outline buttons
Add .btn-pill,.btn-air-* and .btn-outline-* class for button with outline 

<button type="button" class="btn btn-pill btn-outline-primary">Primary Button</button>
<button type="button" class="btn btn-pill btn-outline-secondary">Secondary Button</button>
<button type="button" class="btn btn-pill btn-outline-success">Success Button</button>
<button type="button" class="btn btn-pill btn-outline-info">Info Button</button>
<button type="button" class="btn btn-pill btn-outline-warning">Warning Button</button>
<button type="button" class="btn btn-pill btn-outline-danger">Danger Button</button>
<button type="button" class="btn btn-pill btn-outline-light txt-dark">Light Button</button>
bold Border outline buttons
Add .btn-pill,.btn-air-* and .btn-outline-*-2x class for button with bold outline 

<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>
outline Large buttons
.btn-pill,.btn-air-*,.btn-outline-* and .btn-lg class for large button with outline 

<button type="button" class="btn btn-pill btn-outline-primary btn-lg">Primary Button</button>
<button type="button" class="btn btn-pill btn-outline-secondary btn-lg">Secondary Button</button>
<button type="button" class="btn btn-pill btn-outline-success btn-lg">Success Button</button>
<button type="button" class="btn btn-pill btn-outline-info btn-lg">Info Button</button>
<button type="button" class="btn btn-pill btn-outline-warning btn-lg">Warning Button</button>
<button type="button" class="btn btn-pill btn-outline-danger btn-lg">Danger Button</button>
<button type="button" class="btn btn-pill btn-outline-light btn-lg txt-dark">Light Button</button>
outline small buttons
.btn-pill,.btn-air-*,.btn-outline-* and .btn-sm class for small button with outline 

<button type="button" class="btn btn-pill btn-outline-primary btn-sm">Primary Button</button>
<button type="button" class="btn btn-pill btn-outline-secondary btn-sm">Secondary Button</button>
<button type="button" class="btn btn-pill btn-outline-success btn-sm">Success Button</button>
<button type="button" class="btn btn-pill btn-outline-info btn-sm">Info Button</button>
<button type="button" class="btn btn-pill btn-outline-warning btn-sm">Warning Button</button>
<button type="button" class="btn btn-pill btn-outline-danger btn-sm">Danger Button</button>
<button type="button" class="btn btn-pill btn-outline-light btn-sm txt-dark">Light Button</button>
outline extra small buttons
.btn-pill,.btn-air-*,.btn-outline-* and .btn-xs class for extra small button with outline 

<button type="button" class="btn btn-pill btn-outline-primary btn-xs">Primary Button</button>
<button type="button" class="btn btn-pill btn-outline-secondary btn-xs">Secondary Button</button>
<button type="button" class="btn btn-pill btn-outline-success btn-xs">Success Button</button>
<button type="button" class="btn btn-pill btn-outline-info btn-xs">Info Button</button>
<button type="button" class="btn btn-pill btn-outline-warning btn-xs">Warning Button</button>
<button type="button" class="btn btn-pill btn-outline-danger btn-xs">Danger Button</button>
<button type="button" class="btn btn-pill btn-outline-light btn-xs txt-dark">Light Button</button>
Disabled outline buttons
Add .disabled class or disabled="disabled" attribute for disabled button 

<button type="button" class="btn btn-pill btn-outline-primary disabled">disabled</button>
<button type="button" class="btn btn-pill btn-outline-secondary disabled">disabled</button>
<button type="button" class="btn btn-pill btn-outline-success disabled">disabled</button>
<button type="button" class="btn btn-pill btn-outline-info disabled">disabled</button>
<button type="button" class="btn btn-pill btn-outline-warning disabled">disabled</button>
<button type="button" class="btn btn-pill btn-outline-danger disabled">disabled</button>
<button type="button" class="btn btn-pill btn-outline-light disabled txt-dark">disabled</button>
Gradien buttons
.btn-pill,.btn-air-*,.btn-* and .btn-*-gradien class for gradien button 

<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>