Logo

Geekaxon

Welcome User

  • Light Mode Dark Mode Mix Mode
Logo

Geekaxon

General Buttons

<button type="button" class="btn" aria-label="Button">Button</button>
:root {
    --default-button-border-radius: 6px;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
            -webkit-box-shadow: var(--light-glow-1);
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
            -webkit-box-shadow: var(--light-primary-glow) !important;
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
            -webkit-box-shadow: var(--light-success-1-glow) !important;
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
            -webkit-box-shadow: var(--light-info-1-glow) !important;
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
            -webkit-box-shadow: var(--light-warning-1-glow) !important;
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
            -webkit-box-shadow: var(--light-danger-1-glow) !important;
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
            -webkit-box-shadow: var(--light-light-1-glow) !important;
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
            -webkit-box-shadow: var(--light-dark-1-glow) !important;
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your button component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Button With Outline

Rounded Buttons

<button type="button" class="btn rounded-pill" aria-label="Button">Button</button>
:root {
    --default-button-border-radius: 6px;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
            -webkit-box-shadow: var(--light-glow-1);
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
            -webkit-box-shadow: var(--light-primary-glow) !important;
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
            -webkit-box-shadow: var(--light-success-1-glow) !important;
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
            -webkit-box-shadow: var(--light-info-1-glow) !important;
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
            -webkit-box-shadow: var(--light-warning-1-glow) !important;
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
            -webkit-box-shadow: var(--light-danger-1-glow) !important;
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
            -webkit-box-shadow: var(--light-light-1-glow) !important;
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
            -webkit-box-shadow: var(--light-dark-1-glow) !important;
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Rounded buttons enhance the user interface by providing a modern, appealing look. They can be customized with various background color classes and feature a rounded shape for a sleek appearance.

Background Color Options:

  • text-bg-primary: Theme's primary color.
  • text-bg-success: Indicates success.
  • text-bg-info: For informational purposes.
  • text-bg-warning: Highlights warnings.
  • text-bg-danger: Used for critical actions.
  • text-bg-light: Light background option.
  • text-bg-dark: Dark theme option.

Shape Option:

  • rounded-pill: Applies a pill shape for a softer look.

These classes are ideal for buttons in forms, call-to-action elements, and anywhere a visually appealing button is needed.

Button Sizes

<button type="button" class="btn" aria-label="Button">Button</button>
:root {
    --default-button-border-radius: 6px;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-btn-xl-padding: 6px 20px;
    --button-btn-lg-padding: 6px 20px;
    --button-btn-sm-padding: 5px 14px;
    --button-btn-xsm-padding: 5px 12px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-xl, .btn:first-child.btn-xl, .btn.btn-xl, .btn:last-child.btn-xl, :not(.btn-check) + .btn.btn-xl {
    font-size: 19.6px;
    line-height: 33.32px;
    padding: var(--button-btn-xl-padding) !important;
}
.btn.btn-lg, .btn:first-child.btn-lg, .btn.btn-lg, .btn:last-child.btn-lg, :not(.btn-check) + .btn.btn-lg {
    font-size: 17.5px;
    line-height: 28px;
    padding: var(--button-btn-lg-padding) !important;
}
.btn.btn-sm, .btn:first-child.btn-sm, .btn.btn-sm, .btn:last-child.btn-sm, :not(.btn-check) + .btn.btn-sm {
    font-size: 14px;
    line-height: 18.9px;
    padding: var(--button-btn-sm-padding) !important;
}
.btn.btn-xsm, .btn:first-child.btn-xsm, .btn.btn-xsm, .btn:last-child.btn-xsm, :not(.btn-check) + .btn.btn-xsm {
    font-size: 12.6px;
    line-height: 15.12px;
    padding: var(--button-btn-xsm-padding) !important;
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
            -webkit-box-shadow: var(--light-glow-1);
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
            -webkit-box-shadow: var(--light-primary-glow) !important;
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
            -webkit-box-shadow: var(--light-success-1-glow) !important;
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
            -webkit-box-shadow: var(--light-info-1-glow) !important;
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
            -webkit-box-shadow: var(--light-warning-1-glow) !important;
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
            -webkit-box-shadow: var(--light-danger-1-glow) !important;
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
            -webkit-box-shadow: var(--light-light-1-glow) !important;
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
            -webkit-box-shadow: var(--light-dark-1-glow) !important;
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Button sizes allow developers to create a consistent user interface by offering various button dimensions tailored to different contexts. These options help in enhancing user experience by providing visually distinct button sizes.

Background Color Options:

  • text-bg-primary: Theme's primary color.
  • text-bg-success: Indicates success.
  • text-bg-info: For informational purposes.
  • text-bg-warning: Highlights warnings.
  • text-bg-danger: Used for critical actions.
  • text-bg-light: Light background option.
  • text-bg-dark: Dark theme option.

Shape Option:

  • rounded-pill: Applies a pill shape for a softer look.

Size Option:

  • btn-xl: Extra-large button for prominent actions.
  • btn-lg: Large button for significant emphasis.
  • Normal: Default size if no size class is applied.
  • btn-sm: Small button for minor actions.
  • btn-xsm: Extra small button for subtle actions.

These classes are perfect for various button elements in forms, navigation, and calls to action, allowing for a flexible and adaptive interface.

Button With Icon

Simple Icon Left Align

<button type="button" class="btn" aria-label="Button">
    <i class="fa-duotone fa-heart-half"></i>
    <span class="text">Button</span>
</button>
:root {
    --default-button-border-radius: 6px;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-btn-xl-padding: 6px 20px;
    --button-btn-lg-padding: 6px 20px;
    --button-btn-sm-padding: 5px 14px;
    --button-btn-xsm-padding: 5px 12px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
    transition: font-size var(--transition-breakpoint), color var(--transition-theme);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn:active *, .btn:first-child:active *, .btn:active *, .btn:last-child:active *, :not(.btn-check) + .btn:active * {
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.active *, .btn:first-child.active *, .btn.active *, .btn:last-child.active *, :not(.btn-check) + .btn.active * {
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-xl, .btn:first-child.btn-xl, .btn.btn-xl, .btn:last-child.btn-xl, :not(.btn-check) + .btn.btn-xl {
    font-size: 19.6px;
    line-height: 33.32px;
    padding: var(--button-btn-xl-padding) !important;
}
.btn.btn-lg, .btn:first-child.btn-lg, .btn.btn-lg, .btn:last-child.btn-lg, :not(.btn-check) + .btn.btn-lg {
    font-size: 17.5px;
    line-height: 28px;
    padding: var(--button-btn-lg-padding) !important;
}
.btn.btn-sm, .btn:first-child.btn-sm, .btn.btn-sm, .btn:last-child.btn-sm, :not(.btn-check) + .btn.btn-sm {
    font-size: 14px;
    line-height: 18.9px;
    padding: var(--button-btn-sm-padding) !important;
}
.btn.btn-xsm, .btn:first-child.btn-xsm, .btn.btn-xsm, .btn:last-child.btn-xsm, :not(.btn-check) + .btn.btn-xsm {
    font-size: 12.6px;
    line-height: 15.12px;
    padding: var(--button-btn-xsm-padding) !important;
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary *, .btn:first-child.btn-primary *, .btn.btn-primary *, .btn:last-child.btn-primary *, :not(.btn-check) + .btn.btn-primary * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active *, .btn:first-child.btn-primary:active *, .btn.btn-primary:active *, .btn:last-child.btn-primary:active *, :not(.btn-check) + .btn.btn-primary:active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active *, .btn:first-child.btn-primary.active *, .btn.btn-primary.active *, .btn:last-child.btn-primary.active *, :not(.btn-check) + .btn.btn-primary.active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success *, .btn:first-child.btn-success *, .btn.btn-success *, .btn:last-child.btn-success *, :not(.btn-check) + .btn.btn-success * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active *, .btn:first-child.btn-success:active *, .btn.btn-success:active *, .btn:last-child.btn-success:active *, :not(.btn-check) + .btn.btn-success:active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active *, .btn:first-child.btn-success.active *, .btn.btn-success.active *, .btn:last-child.btn-success.active *, :not(.btn-check) + .btn.btn-success.active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info *, .btn:first-child.btn-info *, .btn.btn-info *, .btn:last-child.btn-info *, :not(.btn-check) + .btn.btn-info * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active *, .btn:first-child.btn-info:active *, .btn.btn-info:active *, .btn:last-child.btn-info:active *, :not(.btn-check) + .btn.btn-info:active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active *, .btn:first-child.btn-info.active *, .btn.btn-info.active *, .btn:last-child.btn-info.active *, :not(.btn-check) + .btn.btn-info.active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning *, .btn:first-child.btn-warning *, .btn.btn-warning *, .btn:last-child.btn-warning *, :not(.btn-check) + .btn.btn-warning * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active *, .btn:first-child.btn-warning:active *, .btn.btn-warning:active *, .btn:last-child.btn-warning:active *, :not(.btn-check) + .btn.btn-warning:active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active *, .btn:first-child.btn-warning.active *, .btn.btn-warning.active *, .btn:last-child.btn-warning.active *, :not(.btn-check) + .btn.btn-warning.active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger *, .btn:first-child.btn-danger *, .btn.btn-danger *, .btn:last-child.btn-danger *, :not(.btn-check) + .btn.btn-danger * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active *, .btn:first-child.btn-danger:active *, .btn.btn-danger:active *, .btn:last-child.btn-danger:active *, :not(.btn-check) + .btn.btn-danger:active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active *, .btn:first-child.btn-danger.active *, .btn.btn-danger.active *, .btn:last-child.btn-danger.active *, :not(.btn-check) + .btn.btn-danger.active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light *, .btn:first-child.btn-light *, .btn.btn-light *, .btn:last-child.btn-light *, :not(.btn-check) + .btn.btn-light * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active *, .btn:first-child.btn-light:active *, .btn.btn-light:active *, .btn:last-child.btn-light:active *, :not(.btn-check) + .btn.btn-light:active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active *, .btn:first-child.btn-light.active *, .btn.btn-light.active *, .btn:last-child.btn-light.active *, :not(.btn-check) + .btn.btn-light.active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark *, .btn:first-child.btn-dark *, .btn.btn-dark *, .btn:last-child.btn-dark *, :not(.btn-check) + .btn.btn-dark * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active *, .btn:first-child.btn-dark:active *, .btn.btn-dark:active *, .btn:last-child.btn-dark:active *, :not(.btn-check) + .btn.btn-dark:active * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active *, .btn:first-child.btn-dark.active *, .btn.btn-dark.active *, .btn:last-child.btn-dark.active *, :not(.btn-check) + .btn.btn-dark.active * {
    color: var(--light-dark-1-text-color) !important;
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:hover:not(:active):not(.active) *, .btn:first-child:hover:not(:active):not(.active) *, .btn:hover:not(:active):not(.active) *, .btn:last-child:hover:not(:active):not(.active) *, :not(.btn-check) + .btn:hover:not(:active):not(.active) * {
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:hover:not(:active):not(.active) *, .btn:first-child.btn-primary:hover:not(:active):not(.active) *, .btn.btn-primary:hover:not(:active):not(.active) *, .btn:last-child.btn-primary:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) * {
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active) *, .btn:first-child.btn-success:hover:not(:active):not(.active) *, .btn.btn-success:hover:not(:active):not(.active) *, .btn:last-child.btn-success:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) * {
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active) *, .btn:first-child.btn-info:hover:not(:active):not(.active) *, .btn.btn-info:hover:not(:active):not(.active) *, .btn:last-child.btn-info:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) * {
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active) *, .btn:first-child.btn-warning:hover:not(:active):not(.active) *, .btn.btn-warning:hover:not(:active):not(.active) *, .btn:last-child.btn-warning:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) * {
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active) *, .btn:first-child.btn-danger:hover:not(:active):not(.active) *, .btn.btn-danger:hover:not(:active):not(.active) *, .btn:last-child.btn-danger:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) * {
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active) *, .btn:first-child.btn-light:hover:not(:active):not(.active) *, .btn.btn-light:hover:not(:active):not(.active) *, .btn:last-child.btn-light:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) * {
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active) *, .btn:first-child.btn-dark:hover:not(:active):not(.active) *, .btn.btn-dark:hover:not(:active):not(.active) *, .btn:last-child.btn-dark:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) * {
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

This setup provides classes to create buttons with an icon and text, with the icon aligned to the left for better UX, and customizable styles for color, size, and shape.

Background Color Options:

  • text-bg-primary: Theme's primary color.
  • text-bg-success: Indicates success.
  • text-bg-info: For informational purposes.
  • text-bg-warning: Highlights warnings.
  • text-bg-danger: Used for critical actions.
  • text-bg-light: Light background option.
  • text-bg-dark: Dark theme option.

Shape Option:

  • rounded-pill: Applies a pill shape for a softer look.

Size Option:

  • btn-xl: Extra-large button for prominent actions.
  • btn-lg: Large button for significant emphasis.
  • Normal: Default size if no size class is applied.
  • btn-sm: Small button for minor actions.
  • btn-xsm: Extra small button for subtle actions.

This configuration allows you to create buttons with an icon on the left and text, offering size flexibility, color customization, and smooth rounded shapes for a polished look.

Simple Icon Right Align

<button type="button" class="btn" aria-label="Button">
    <span class="text">Button</span>
    <i class="fa-duotone fa-heart-half"></i>
</button>
:root {
    --default-button-border-radius: 6px;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-btn-xl-padding: 6px 20px;
    --button-btn-lg-padding: 6px 20px;
    --button-btn-sm-padding: 5px 14px;
    --button-btn-xsm-padding: 5px 12px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
    transition: font-size var(--transition-breakpoint), color var(--transition-theme);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn:active *, .btn:first-child:active *, .btn:active *, .btn:last-child:active *, :not(.btn-check) + .btn:active * {
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.active *, .btn:first-child.active *, .btn.active *, .btn:last-child.active *, :not(.btn-check) + .btn.active * {
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-xl, .btn:first-child.btn-xl, .btn.btn-xl, .btn:last-child.btn-xl, :not(.btn-check) + .btn.btn-xl {
    font-size: 19.6px;
    line-height: 33.32px;
    padding: var(--button-btn-xl-padding) !important;
}
.btn.btn-lg, .btn:first-child.btn-lg, .btn.btn-lg, .btn:last-child.btn-lg, :not(.btn-check) + .btn.btn-lg {
    font-size: 17.5px;
    line-height: 28px;
    padding: var(--button-btn-lg-padding) !important;
}
.btn.btn-sm, .btn:first-child.btn-sm, .btn.btn-sm, .btn:last-child.btn-sm, :not(.btn-check) + .btn.btn-sm {
    font-size: 14px;
    line-height: 18.9px;
    padding: var(--button-btn-sm-padding) !important;
}
.btn.btn-xsm, .btn:first-child.btn-xsm, .btn.btn-xsm, .btn:last-child.btn-xsm, :not(.btn-check) + .btn.btn-xsm {
    font-size: 12.6px;
    line-height: 15.12px;
    padding: var(--button-btn-xsm-padding) !important;
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary *, .btn:first-child.btn-primary *, .btn.btn-primary *, .btn:last-child.btn-primary *, :not(.btn-check) + .btn.btn-primary * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active *, .btn:first-child.btn-primary:active *, .btn.btn-primary:active *, .btn:last-child.btn-primary:active *, :not(.btn-check) + .btn.btn-primary:active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active *, .btn:first-child.btn-primary.active *, .btn.btn-primary.active *, .btn:last-child.btn-primary.active *, :not(.btn-check) + .btn.btn-primary.active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success *, .btn:first-child.btn-success *, .btn.btn-success *, .btn:last-child.btn-success *, :not(.btn-check) + .btn.btn-success * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active *, .btn:first-child.btn-success:active *, .btn.btn-success:active *, .btn:last-child.btn-success:active *, :not(.btn-check) + .btn.btn-success:active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active *, .btn:first-child.btn-success.active *, .btn.btn-success.active *, .btn:last-child.btn-success.active *, :not(.btn-check) + .btn.btn-success.active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info *, .btn:first-child.btn-info *, .btn.btn-info *, .btn:last-child.btn-info *, :not(.btn-check) + .btn.btn-info * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active *, .btn:first-child.btn-info:active *, .btn.btn-info:active *, .btn:last-child.btn-info:active *, :not(.btn-check) + .btn.btn-info:active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active *, .btn:first-child.btn-info.active *, .btn.btn-info.active *, .btn:last-child.btn-info.active *, :not(.btn-check) + .btn.btn-info.active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning *, .btn:first-child.btn-warning *, .btn.btn-warning *, .btn:last-child.btn-warning *, :not(.btn-check) + .btn.btn-warning * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active *, .btn:first-child.btn-warning:active *, .btn.btn-warning:active *, .btn:last-child.btn-warning:active *, :not(.btn-check) + .btn.btn-warning:active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active *, .btn:first-child.btn-warning.active *, .btn.btn-warning.active *, .btn:last-child.btn-warning.active *, :not(.btn-check) + .btn.btn-warning.active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger *, .btn:first-child.btn-danger *, .btn.btn-danger *, .btn:last-child.btn-danger *, :not(.btn-check) + .btn.btn-danger * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active *, .btn:first-child.btn-danger:active *, .btn.btn-danger:active *, .btn:last-child.btn-danger:active *, :not(.btn-check) + .btn.btn-danger:active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active *, .btn:first-child.btn-danger.active *, .btn.btn-danger.active *, .btn:last-child.btn-danger.active *, :not(.btn-check) + .btn.btn-danger.active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light *, .btn:first-child.btn-light *, .btn.btn-light *, .btn:last-child.btn-light *, :not(.btn-check) + .btn.btn-light * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active *, .btn:first-child.btn-light:active *, .btn.btn-light:active *, .btn:last-child.btn-light:active *, :not(.btn-check) + .btn.btn-light:active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active *, .btn:first-child.btn-light.active *, .btn.btn-light.active *, .btn:last-child.btn-light.active *, :not(.btn-check) + .btn.btn-light.active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark *, .btn:first-child.btn-dark *, .btn.btn-dark *, .btn:last-child.btn-dark *, :not(.btn-check) + .btn.btn-dark * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active *, .btn:first-child.btn-dark:active *, .btn.btn-dark:active *, .btn:last-child.btn-dark:active *, :not(.btn-check) + .btn.btn-dark:active * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active *, .btn:first-child.btn-dark.active *, .btn.btn-dark.active *, .btn:last-child.btn-dark.active *, :not(.btn-check) + .btn.btn-dark.active * {
    color: var(--light-dark-1-text-color) !important;
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:hover:not(:active):not(.active) *, .btn:first-child:hover:not(:active):not(.active) *, .btn:hover:not(:active):not(.active) *, .btn:last-child:hover:not(:active):not(.active) *, :not(.btn-check) + .btn:hover:not(:active):not(.active) * {
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:hover:not(:active):not(.active) *, .btn:first-child.btn-primary:hover:not(:active):not(.active) *, .btn.btn-primary:hover:not(:active):not(.active) *, .btn:last-child.btn-primary:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) * {
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active) *, .btn:first-child.btn-success:hover:not(:active):not(.active) *, .btn.btn-success:hover:not(:active):not(.active) *, .btn:last-child.btn-success:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) * {
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active) *, .btn:first-child.btn-info:hover:not(:active):not(.active) *, .btn.btn-info:hover:not(:active):not(.active) *, .btn:last-child.btn-info:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) * {
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active) *, .btn:first-child.btn-warning:hover:not(:active):not(.active) *, .btn.btn-warning:hover:not(:active):not(.active) *, .btn:last-child.btn-warning:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) * {
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active) *, .btn:first-child.btn-danger:hover:not(:active):not(.active) *, .btn.btn-danger:hover:not(:active):not(.active) *, .btn:last-child.btn-danger:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) * {
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active) *, .btn:first-child.btn-light:hover:not(:active):not(.active) *, .btn.btn-light:hover:not(:active):not(.active) *, .btn:last-child.btn-light:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) * {
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active) *, .btn:first-child.btn-dark:hover:not(:active):not(.active) *, .btn.btn-dark:hover:not(:active):not(.active) *, .btn:last-child.btn-dark:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) * {
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

This setup provides classes to create buttons with an icon and text, with the icon aligned to the right for better UX, and customizable styles for color, size, and shape.

Background Color Options:

  • text-bg-primary: Theme's primary color.
  • text-bg-success: Indicates success.
  • text-bg-info: For informational purposes.
  • text-bg-warning: Highlights warnings.
  • text-bg-danger: Used for critical actions.
  • text-bg-light: Light background option.
  • text-bg-dark: Dark theme option.

Shape Option:

  • rounded-pill: Applies a pill shape for a softer look.

Size Option:

  • btn-xl: Extra-large button for prominent actions.
  • btn-lg: Large button for significant emphasis.
  • Normal: Default size if no size class is applied.
  • btn-sm: Small button for minor actions.
  • btn-xsm: Extra small button for subtle actions.

This configuration allows you to create buttons with an icon on the right and text, offering size flexibility, color customization, and smooth rounded shapes for a polished look.

Boxed Icon Left Align

<button type="button" class="btn" aria-label="Button">
    <span class="boxed-icon">
        <i class="fa-duotone fa-heart-half" style="--fa-secondary-opacity: 0.7;"></i>
    </span>
    <span class="text">Button</span>
</button>
:root {
    --default-button-border-radius: 6px;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-btn-xl-padding: 6px 20px;
    --button-btn-lg-padding: 6px 20px;
    --button-btn-sm-padding: 5px 14px;
    --button-btn-xsm-padding: 5px 12px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
    transition: font-size var(--transition-breakpoint), color var(--transition-theme);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn:active *, .btn:first-child:active *, .btn:active *, .btn:last-child:active *, :not(.btn-check) + .btn:active * {
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.active *, .btn:first-child.active *, .btn.active *, .btn:last-child.active *, :not(.btn-check) + .btn.active * {
    color: var(--light-button-btn-text-actived-color);
}
.btn:has(.boxed-icon), .btn:first-child:has(.boxed-icon), .btn:has(.boxed-icon), .btn:last-child:has(.boxed-icon), :not(.btn-check) + .btn:has(.boxed-icon) {
    padding: 0;
    gap: 0;
}
.btn:has(.boxed-icon) .boxed-icon, .btn:first-child:has(.boxed-icon) .boxed-icon, .btn:has(.boxed-icon) .boxed-icon, .btn:last-child:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn:has(.boxed-icon) .boxed-icon {
    min-width: 37.88px;
    aspect-ratio: 1;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition: min-width var(--transition-breakpoint), background-color var(--transition-theme);
    transition: min-width var(--transition-breakpoint), background-color var(--transition-theme);
}
.btn:has(.boxed-icon) .boxed-icon i, .btn:first-child:has(.boxed-icon) .boxed-icon i, .btn:has(.boxed-icon) .boxed-icon i, .btn:last-child:has(.boxed-icon) .boxed-icon i, :not(.btn-check) + .btn:has(.boxed-icon) .boxed-icon i {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.btn:has(.boxed-icon) .text, .btn:first-child:has(.boxed-icon) .text, .btn:has(.boxed-icon) .text, .btn:last-child:has(.boxed-icon) .text, :not(.btn-check) + .btn:has(.boxed-icon) .text {
    padding: var(--button-btn-padding);
}
.btn.btn-xl, .btn:first-child.btn-xl, .btn.btn-xl, .btn:last-child.btn-xl, :not(.btn-check) + .btn.btn-xl {
    font-size: 19.6px;
    line-height: 33.32px;
    padding: var(--button-btn-xl-padding) !important;
}
.btn.btn-xl:has(.boxed-icon), .btn:first-child.btn-xl:has(.boxed-icon), .btn.btn-xl:has(.boxed-icon), .btn:last-child.btn-xl:has(.boxed-icon), :not(.btn-check) + .btn.btn-xl:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-xl:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-xl:has(.boxed-icon) .boxed-icon, .btn.btn-xl:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-xl:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-xl:has(.boxed-icon) .boxed-icon {
    min-width: 47.31px !important;
}
.btn.btn-xl:has(.boxed-icon) .text, .btn:first-child.btn-xl:has(.boxed-icon) .text, .btn.btn-xl:has(.boxed-icon) .text, .btn:last-child.btn-xl:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-xl:has(.boxed-icon) .text {
    padding: var(--button-btn-xl-padding) !important;
}
.btn.btn-lg, .btn:first-child.btn-lg, .btn.btn-lg, .btn:last-child.btn-lg, :not(.btn-check) + .btn.btn-lg {
    font-size: 17.5px;
    line-height: 28px;
    padding: var(--button-btn-lg-padding) !important;
}
.btn.btn-lg:has(.boxed-icon), .btn:first-child.btn-lg:has(.boxed-icon), .btn.btn-lg:has(.boxed-icon), .btn:last-child.btn-lg:has(.boxed-icon), :not(.btn-check) + .btn.btn-lg:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-lg:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-lg:has(.boxed-icon) .boxed-icon, .btn.btn-lg:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-lg:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-lg:has(.boxed-icon) .boxed-icon {
    min-width: 42px !important;
}
.btn.btn-lg:has(.boxed-icon) .text, .btn:first-child.btn-lg:has(.boxed-icon) .text, .btn.btn-lg:has(.boxed-icon) .text, .btn:last-child.btn-lg:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-lg:has(.boxed-icon) .text {
    padding: var(--button-btn-lg-padding) !important;
}
.btn.btn-sm, .btn:first-child.btn-sm, .btn.btn-sm, .btn:last-child.btn-sm, :not(.btn-check) + .btn.btn-sm {
    font-size: 14px;
    line-height: 18.9px;
    padding: var(--button-btn-sm-padding) !important;
}
.btn.btn-sm:has(.boxed-icon), .btn:first-child.btn-sm:has(.boxed-icon), .btn.btn-sm:has(.boxed-icon), .btn:last-child.btn-sm:has(.boxed-icon), :not(.btn-check) + .btn.btn-sm:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-sm:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-sm:has(.boxed-icon) .boxed-icon, .btn.btn-sm:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-sm:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-sm:has(.boxed-icon) .boxed-icon {
    min-width: 30.91px !important;
}
.btn.btn-sm:has(.boxed-icon) .text, .btn:first-child.btn-sm:has(.boxed-icon) .text, .btn.btn-sm:has(.boxed-icon) .text, .btn:last-child.btn-sm:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-sm:has(.boxed-icon) .text {
    padding: var(--button-btn-sm-padding) !important;
}
.btn.btn-xsm, .btn:first-child.btn-xsm, .btn.btn-xsm, .btn:last-child.btn-xsm, :not(.btn-check) + .btn.btn-xsm {
    font-size: 12.6px;
    line-height: 15.12px;
    padding: var(--button-btn-xsm-padding) !important;
}
.btn.btn-xsm:has(.boxed-icon), .btn:first-child.btn-xsm:has(.boxed-icon), .btn.btn-xsm:has(.boxed-icon), .btn:last-child.btn-xsm:has(.boxed-icon), :not(.btn-check) + .btn.btn-xsm:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-xsm:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-xsm:has(.boxed-icon) .boxed-icon, .btn.btn-xsm:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-xsm:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-xsm:has(.boxed-icon) .boxed-icon {
    min-width: 27.13px !important;
}
.btn.btn-xsm:has(.boxed-icon) .text, .btn:first-child.btn-xsm:has(.boxed-icon) .text, .btn.btn-xsm:has(.boxed-icon) .text, .btn:last-child.btn-xsm:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-xsm:has(.boxed-icon) .text {
    padding: var(--button-btn-xsm-padding) !important;
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary *, .btn:first-child.btn-primary *, .btn.btn-primary *, .btn:last-child.btn-primary *, :not(.btn-check) + .btn.btn-primary * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active *, .btn:first-child.btn-primary:active *, .btn.btn-primary:active *, .btn:last-child.btn-primary:active *, :not(.btn-check) + .btn.btn-primary:active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active *, .btn:first-child.btn-primary.active *, .btn.btn-primary.active *, .btn:last-child.btn-primary.active *, :not(.btn-check) + .btn.btn-primary.active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-primary:has(.boxed-icon) .boxed-icon, .btn.btn-primary:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-primary:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-primary:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success *, .btn:first-child.btn-success *, .btn.btn-success *, .btn:last-child.btn-success *, :not(.btn-check) + .btn.btn-success * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active *, .btn:first-child.btn-success:active *, .btn.btn-success:active *, .btn:last-child.btn-success:active *, :not(.btn-check) + .btn.btn-success:active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active *, .btn:first-child.btn-success.active *, .btn.btn-success.active *, .btn:last-child.btn-success.active *, :not(.btn-check) + .btn.btn-success.active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-success:has(.boxed-icon) .boxed-icon, .btn.btn-success:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-success:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-success:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info *, .btn:first-child.btn-info *, .btn.btn-info *, .btn:last-child.btn-info *, :not(.btn-check) + .btn.btn-info * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active *, .btn:first-child.btn-info:active *, .btn.btn-info:active *, .btn:last-child.btn-info:active *, :not(.btn-check) + .btn.btn-info:active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active *, .btn:first-child.btn-info.active *, .btn.btn-info.active *, .btn:last-child.btn-info.active *, :not(.btn-check) + .btn.btn-info.active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-info:has(.boxed-icon) .boxed-icon, .btn.btn-info:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-info:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-info:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning *, .btn:first-child.btn-warning *, .btn.btn-warning *, .btn:last-child.btn-warning *, :not(.btn-check) + .btn.btn-warning * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active *, .btn:first-child.btn-warning:active *, .btn.btn-warning:active *, .btn:last-child.btn-warning:active *, :not(.btn-check) + .btn.btn-warning:active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active *, .btn:first-child.btn-warning.active *, .btn.btn-warning.active *, .btn:last-child.btn-warning.active *, :not(.btn-check) + .btn.btn-warning.active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-warning:has(.boxed-icon) .boxed-icon, .btn.btn-warning:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-warning:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-warning:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger *, .btn:first-child.btn-danger *, .btn.btn-danger *, .btn:last-child.btn-danger *, :not(.btn-check) + .btn.btn-danger * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active *, .btn:first-child.btn-danger:active *, .btn.btn-danger:active *, .btn:last-child.btn-danger:active *, :not(.btn-check) + .btn.btn-danger:active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active *, .btn:first-child.btn-danger.active *, .btn.btn-danger.active *, .btn:last-child.btn-danger.active *, :not(.btn-check) + .btn.btn-danger.active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-danger:has(.boxed-icon) .boxed-icon, .btn.btn-danger:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-danger:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-danger:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light *, .btn:first-child.btn-light *, .btn.btn-light *, .btn:last-child.btn-light *, :not(.btn-check) + .btn.btn-light * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active *, .btn:first-child.btn-light:active *, .btn.btn-light:active *, .btn:last-child.btn-light:active *, :not(.btn-check) + .btn.btn-light:active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active *, .btn:first-child.btn-light.active *, .btn.btn-light.active *, .btn:last-child.btn-light.active *, :not(.btn-check) + .btn.btn-light.active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-light:has(.boxed-icon) .boxed-icon, .btn.btn-light:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-light:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-light:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark *, .btn:first-child.btn-dark *, .btn.btn-dark *, .btn:last-child.btn-dark *, :not(.btn-check) + .btn.btn-dark * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active *, .btn:first-child.btn-dark:active *, .btn.btn-dark:active *, .btn:last-child.btn-dark:active *, :not(.btn-check) + .btn.btn-dark:active * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active *, .btn:first-child.btn-dark.active *, .btn.btn-dark.active *, .btn:last-child.btn-dark.active *, :not(.btn-check) + .btn.btn-dark.active * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-dark:has(.boxed-icon) .boxed-icon, .btn.btn-dark:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-dark:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-dark:has(.boxed-icon) .boxed-icon {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:hover:not(:active):not(.active) *, .btn:first-child:hover:not(:active):not(.active) *, .btn:hover:not(:active):not(.active) *, .btn:last-child:hover:not(:active):not(.active) *, :not(.btn-check) + .btn:hover:not(:active):not(.active) * {
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:hover:not(:active):not(.active) *, .btn:first-child.btn-primary:hover:not(:active):not(.active) *, .btn.btn-primary:hover:not(:active):not(.active) *, .btn:last-child.btn-primary:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) * {
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active) *, .btn:first-child.btn-success:hover:not(:active):not(.active) *, .btn.btn-success:hover:not(:active):not(.active) *, .btn:last-child.btn-success:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) * {
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active) *, .btn:first-child.btn-info:hover:not(:active):not(.active) *, .btn.btn-info:hover:not(:active):not(.active) *, .btn:last-child.btn-info:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) * {
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active) *, .btn:first-child.btn-warning:hover:not(:active):not(.active) *, .btn.btn-warning:hover:not(:active):not(.active) *, .btn:last-child.btn-warning:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) * {
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active) *, .btn:first-child.btn-danger:hover:not(:active):not(.active) *, .btn.btn-danger:hover:not(:active):not(.active) *, .btn:last-child.btn-danger:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) * {
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active) *, .btn:first-child.btn-light:hover:not(:active):not(.active) *, .btn.btn-light:hover:not(:active):not(.active) *, .btn:last-child.btn-light:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) * {
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active) *, .btn:first-child.btn-dark:hover:not(:active):not(.active) *, .btn.btn-dark:hover:not(:active):not(.active) *, .btn:last-child.btn-dark:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) * {
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

This setup provides classes to create buttons with an icon and text, with the icon aligned to the left for better UX, and customizable styles for color, size, and shape.

Background Color Options:

  • text-bg-primary: Theme's primary color.
  • text-bg-success: Indicates success.
  • text-bg-info: For informational purposes.
  • text-bg-warning: Highlights warnings.
  • text-bg-danger: Used for critical actions.
  • text-bg-light: Light background option.
  • text-bg-dark: Dark theme option.

Shape Option:

  • rounded-pill: Applies a pill shape for a softer look.

Size Option:

  • btn-xl: Extra-large button for prominent actions.
  • btn-lg: Large button for significant emphasis.
  • Normal: Default size if no size class is applied.
  • btn-sm: Small button for minor actions.
  • btn-xsm: Extra small button for subtle actions.

This configuration allows you to create buttons with an icon on the left and text, offering size flexibility, color customization, and smooth rounded shapes for a polished look.

Boxed Icon Right Align

<button type="button" class="btn" aria-label="Button">
    <span class="text">Button</span>
    <span class="boxed-icon">
        <i class="fa-duotone fa-heart-half" style="--fa-secondary-opacity: 0.7;"></i>
    </span>
</button>
:root {
    --default-button-border-radius: 6px;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-btn-xl-padding: 6px 20px;
    --button-btn-lg-padding: 6px 20px;
    --button-btn-sm-padding: 5px 14px;
    --button-btn-xsm-padding: 5px 12px;
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
    transition: font-size var(--transition-breakpoint), color var(--transition-theme);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn:active *, .btn:first-child:active *, .btn:active *, .btn:last-child:active *, :not(.btn-check) + .btn:active * {
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.active *, .btn:first-child.active *, .btn.active *, .btn:last-child.active *, :not(.btn-check) + .btn.active * {
    color: var(--light-button-btn-text-actived-color);
}
.btn:has(.boxed-icon), .btn:first-child:has(.boxed-icon), .btn:has(.boxed-icon), .btn:last-child:has(.boxed-icon), :not(.btn-check) + .btn:has(.boxed-icon) {
    padding: 0;
    gap: 0;
}
.btn:has(.boxed-icon) .boxed-icon, .btn:first-child:has(.boxed-icon) .boxed-icon, .btn:has(.boxed-icon) .boxed-icon, .btn:last-child:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn:has(.boxed-icon) .boxed-icon {
    min-width: 37.88px;
    aspect-ratio: 1;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition: min-width var(--transition-breakpoint), background-color var(--transition-theme);
    transition: min-width var(--transition-breakpoint), background-color var(--transition-theme);
}
.btn:has(.boxed-icon) .boxed-icon i, .btn:first-child:has(.boxed-icon) .boxed-icon i, .btn:has(.boxed-icon) .boxed-icon i, .btn:last-child:has(.boxed-icon) .boxed-icon i, :not(.btn-check) + .btn:has(.boxed-icon) .boxed-icon i {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.btn:has(.boxed-icon) .text, .btn:first-child:has(.boxed-icon) .text, .btn:has(.boxed-icon) .text, .btn:last-child:has(.boxed-icon) .text, :not(.btn-check) + .btn:has(.boxed-icon) .text {
    padding: var(--button-btn-padding);
}
.btn.btn-xl, .btn:first-child.btn-xl, .btn.btn-xl, .btn:last-child.btn-xl, :not(.btn-check) + .btn.btn-xl {
    font-size: 19.6px;
    line-height: 33.32px;
    padding: var(--button-btn-xl-padding) !important;
}
.btn.btn-xl:has(.boxed-icon), .btn:first-child.btn-xl:has(.boxed-icon), .btn.btn-xl:has(.boxed-icon), .btn:last-child.btn-xl:has(.boxed-icon), :not(.btn-check) + .btn.btn-xl:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-xl:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-xl:has(.boxed-icon) .boxed-icon, .btn.btn-xl:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-xl:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-xl:has(.boxed-icon) .boxed-icon {
    min-width: 47.31px !important;
}
.btn.btn-xl:has(.boxed-icon) .text, .btn:first-child.btn-xl:has(.boxed-icon) .text, .btn.btn-xl:has(.boxed-icon) .text, .btn:last-child.btn-xl:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-xl:has(.boxed-icon) .text {
    padding: var(--button-btn-xl-padding) !important;
}
.btn.btn-lg, .btn:first-child.btn-lg, .btn.btn-lg, .btn:last-child.btn-lg, :not(.btn-check) + .btn.btn-lg {
    font-size: 17.5px;
    line-height: 28px;
    padding: var(--button-btn-lg-padding) !important;
}
.btn.btn-lg:has(.boxed-icon), .btn:first-child.btn-lg:has(.boxed-icon), .btn.btn-lg:has(.boxed-icon), .btn:last-child.btn-lg:has(.boxed-icon), :not(.btn-check) + .btn.btn-lg:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-lg:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-lg:has(.boxed-icon) .boxed-icon, .btn.btn-lg:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-lg:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-lg:has(.boxed-icon) .boxed-icon {
    min-width: 42px !important;
}
.btn.btn-lg:has(.boxed-icon) .text, .btn:first-child.btn-lg:has(.boxed-icon) .text, .btn.btn-lg:has(.boxed-icon) .text, .btn:last-child.btn-lg:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-lg:has(.boxed-icon) .text {
    padding: var(--button-btn-lg-padding) !important;
}
.btn.btn-sm, .btn:first-child.btn-sm, .btn.btn-sm, .btn:last-child.btn-sm, :not(.btn-check) + .btn.btn-sm {
    font-size: 14px;
    line-height: 18.9px;
    padding: var(--button-btn-sm-padding) !important;
}
.btn.btn-sm:has(.boxed-icon), .btn:first-child.btn-sm:has(.boxed-icon), .btn.btn-sm:has(.boxed-icon), .btn:last-child.btn-sm:has(.boxed-icon), :not(.btn-check) + .btn.btn-sm:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-sm:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-sm:has(.boxed-icon) .boxed-icon, .btn.btn-sm:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-sm:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-sm:has(.boxed-icon) .boxed-icon {
    min-width: 30.91px !important;
}
.btn.btn-sm:has(.boxed-icon) .text, .btn:first-child.btn-sm:has(.boxed-icon) .text, .btn.btn-sm:has(.boxed-icon) .text, .btn:last-child.btn-sm:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-sm:has(.boxed-icon) .text {
    padding: var(--button-btn-sm-padding) !important;
}
.btn.btn-xsm, .btn:first-child.btn-xsm, .btn.btn-xsm, .btn:last-child.btn-xsm, :not(.btn-check) + .btn.btn-xsm {
    font-size: 12.6px;
    line-height: 15.12px;
    padding: var(--button-btn-xsm-padding) !important;
}
.btn.btn-xsm:has(.boxed-icon), .btn:first-child.btn-xsm:has(.boxed-icon), .btn.btn-xsm:has(.boxed-icon), .btn:last-child.btn-xsm:has(.boxed-icon), :not(.btn-check) + .btn.btn-xsm:has(.boxed-icon) {
    padding: 0 !important;
    gap: 0 !important;
}
.btn.btn-xsm:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-xsm:has(.boxed-icon) .boxed-icon, .btn.btn-xsm:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-xsm:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-xsm:has(.boxed-icon) .boxed-icon {
    min-width: 27.13px !important;
}
.btn.btn-xsm:has(.boxed-icon) .text, .btn:first-child.btn-xsm:has(.boxed-icon) .text, .btn.btn-xsm:has(.boxed-icon) .text, .btn:last-child.btn-xsm:has(.boxed-icon) .text, :not(.btn-check) + .btn.btn-xsm:has(.boxed-icon) .text {
    padding: var(--button-btn-xsm-padding) !important;
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary *, .btn:first-child.btn-primary *, .btn.btn-primary *, .btn:last-child.btn-primary *, :not(.btn-check) + .btn.btn-primary * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active *, .btn:first-child.btn-primary:active *, .btn.btn-primary:active *, .btn:last-child.btn-primary:active *, :not(.btn-check) + .btn.btn-primary:active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active *, .btn:first-child.btn-primary.active *, .btn.btn-primary.active *, .btn:last-child.btn-primary.active *, :not(.btn-check) + .btn.btn-primary.active * {
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-primary:has(.boxed-icon) .boxed-icon, .btn.btn-primary:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-primary:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-primary:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success *, .btn:first-child.btn-success *, .btn.btn-success *, .btn:last-child.btn-success *, :not(.btn-check) + .btn.btn-success * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active *, .btn:first-child.btn-success:active *, .btn.btn-success:active *, .btn:last-child.btn-success:active *, :not(.btn-check) + .btn.btn-success:active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active *, .btn:first-child.btn-success.active *, .btn.btn-success.active *, .btn:last-child.btn-success.active *, :not(.btn-check) + .btn.btn-success.active * {
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-success:has(.boxed-icon) .boxed-icon, .btn.btn-success:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-success:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-success:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info *, .btn:first-child.btn-info *, .btn.btn-info *, .btn:last-child.btn-info *, :not(.btn-check) + .btn.btn-info * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active *, .btn:first-child.btn-info:active *, .btn.btn-info:active *, .btn:last-child.btn-info:active *, :not(.btn-check) + .btn.btn-info:active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active *, .btn:first-child.btn-info.active *, .btn.btn-info.active *, .btn:last-child.btn-info.active *, :not(.btn-check) + .btn.btn-info.active * {
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-info:has(.boxed-icon) .boxed-icon, .btn.btn-info:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-info:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-info:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning *, .btn:first-child.btn-warning *, .btn.btn-warning *, .btn:last-child.btn-warning *, :not(.btn-check) + .btn.btn-warning * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active *, .btn:first-child.btn-warning:active *, .btn.btn-warning:active *, .btn:last-child.btn-warning:active *, :not(.btn-check) + .btn.btn-warning:active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active *, .btn:first-child.btn-warning.active *, .btn.btn-warning.active *, .btn:last-child.btn-warning.active *, :not(.btn-check) + .btn.btn-warning.active * {
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-warning:has(.boxed-icon) .boxed-icon, .btn.btn-warning:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-warning:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-warning:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger *, .btn:first-child.btn-danger *, .btn.btn-danger *, .btn:last-child.btn-danger *, :not(.btn-check) + .btn.btn-danger * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active *, .btn:first-child.btn-danger:active *, .btn.btn-danger:active *, .btn:last-child.btn-danger:active *, :not(.btn-check) + .btn.btn-danger:active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active *, .btn:first-child.btn-danger.active *, .btn.btn-danger.active *, .btn:last-child.btn-danger.active *, :not(.btn-check) + .btn.btn-danger.active * {
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-danger:has(.boxed-icon) .boxed-icon, .btn.btn-danger:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-danger:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-danger:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light *, .btn:first-child.btn-light *, .btn.btn-light *, .btn:last-child.btn-light *, :not(.btn-check) + .btn.btn-light * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active *, .btn:first-child.btn-light:active *, .btn.btn-light:active *, .btn:last-child.btn-light:active *, :not(.btn-check) + .btn.btn-light:active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active *, .btn:first-child.btn-light.active *, .btn.btn-light.active *, .btn:last-child.btn-light.active *, :not(.btn-check) + .btn.btn-light.active * {
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-light:has(.boxed-icon) .boxed-icon, .btn.btn-light:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-light:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-light:has(.boxed-icon) .boxed-icon {
    background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark *, .btn:first-child.btn-dark *, .btn.btn-dark *, .btn:last-child.btn-dark *, :not(.btn-check) + .btn.btn-dark * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active *, .btn:first-child.btn-dark:active *, .btn.btn-dark:active *, .btn:last-child.btn-dark:active *, :not(.btn-check) + .btn.btn-dark:active * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active *, .btn:first-child.btn-dark.active *, .btn.btn-dark.active *, .btn:last-child.btn-dark.active *, :not(.btn-check) + .btn.btn-dark.active * {
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:has(.boxed-icon) .boxed-icon, .btn:first-child.btn-dark:has(.boxed-icon) .boxed-icon, .btn.btn-dark:has(.boxed-icon) .boxed-icon, .btn:last-child.btn-dark:has(.boxed-icon) .boxed-icon, :not(.btn-check) + .btn.btn-dark:has(.boxed-icon) .boxed-icon {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn *, .btn:first-child *, .btn *, .btn:last-child *, :not(.btn-check) + .btn * {
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:hover:not(:active):not(.active) *, .btn:first-child:hover:not(:active):not(.active) *, .btn:hover:not(:active):not(.active) *, .btn:last-child:hover:not(:active):not(.active) *, :not(.btn-check) + .btn:hover:not(:active):not(.active) * {
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:hover:not(:active):not(.active) *, .btn:first-child.btn-primary:hover:not(:active):not(.active) *, .btn.btn-primary:hover:not(:active):not(.active) *, .btn:last-child.btn-primary:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) * {
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active) *, .btn:first-child.btn-success:hover:not(:active):not(.active) *, .btn.btn-success:hover:not(:active):not(.active) *, .btn:last-child.btn-success:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) * {
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active) *, .btn:first-child.btn-info:hover:not(:active):not(.active) *, .btn.btn-info:hover:not(:active):not(.active) *, .btn:last-child.btn-info:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) * {
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active) *, .btn:first-child.btn-warning:hover:not(:active):not(.active) *, .btn.btn-warning:hover:not(:active):not(.active) *, .btn:last-child.btn-warning:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) * {
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active) *, .btn:first-child.btn-danger:hover:not(:active):not(.active) *, .btn.btn-danger:hover:not(:active):not(.active) *, .btn:last-child.btn-danger:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) * {
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active) *, .btn:first-child.btn-light:hover:not(:active):not(.active) *, .btn.btn-light:hover:not(:active):not(.active) *, .btn:last-child.btn-light:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) * {
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active) *, .btn:first-child.btn-dark:hover:not(:active):not(.active) *, .btn.btn-dark:hover:not(:active):not(.active) *, .btn:last-child.btn-dark:hover:not(:active):not(.active) *, :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) * {
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

This setup provides classes to create buttons with an icon and text, with the icon aligned to the left for better UX, and customizable styles for color, size, and shape.

Background Color Options:

  • text-bg-primary: Theme's primary color.
  • text-bg-success: Indicates success.
  • text-bg-info: For informational purposes.
  • text-bg-warning: Highlights warnings.
  • text-bg-danger: Used for critical actions.
  • text-bg-light: Light background option.
  • text-bg-dark: Dark theme option.

Shape Option:

  • rounded-pill: Applies a pill shape for a softer look.

Size Option:

  • btn-xl: Extra-large button for prominent actions.
  • btn-lg: Large button for significant emphasis.
  • Normal: Default size if no size class is applied.
  • btn-sm: Small button for minor actions.
  • btn-xsm: Extra small button for subtle actions.

This configuration allows you to create buttons with an icon on the left and text, offering size flexibility, color customization, and smooth rounded shapes for a polished look.

Icon Buttons

General Icon Buttons

<button type="button" class="btn btn-icon" aria-label="Icon Button">
    <i class="fa-duotone fa-heart-half icon"></i>
</button>
:root {
    --light-glow-1: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-base-transparent-8: rgba(255, 255, 255, 0.8);
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
    --default-button-border-radius: 6px;
    --default-button-rounded-btn-border-radius: 6px;
    --default-button-circled-btn-border-radius: 50%;
    --light-button-btn-group-seperated-border-background-color: #d2d2d2;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --dark-button-btn-group-seperated-border-background-color: #918e99;
    --dark-button-btn-background-color: #21242b;
    --dark-button-btn-background-hover-color: #2e3136;
    --dark-button-btn-background-active-color: #3b3d41;
    --dark-button-btn-background-actived-color: #4a4a4b;
    --dark-button-btn-text-color: #f6f6f6;
    --dark-button-btn-text-hover-color: #f6f6f6;
    --dark-button-btn-text-active-color: #f6f6f6;
    --dark-button-btn-text-actived-color: #a2a1ff;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-icon-btn-width-height: 42px;
    --button-icon-btn-padding: 0;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-icon, .btn:first-child.btn-icon, .btn.btn-icon, .btn:last-child.btn-icon, :not(.btn-check) + .btn.btn-icon {
    width: var(--button-icon-btn-width-height);
    aspect-ratio: 1;
    padding: var(--button-icon-btn-padding);
}
.btn.btn-icon .icon, .btn.btn-icon i, .btn:first-child.btn-icon .icon, .btn:first-child.btn-icon i, .btn.btn-icon .icon, .btn.btn-icon i, .btn:last-child.btn-icon .icon, .btn:last-child.btn-icon i, :not(.btn-check) + .btn.btn-icon .icon, :not(.btn-check) + .btn.btn-icon i {
    font-size: 19.6px;
    line-height: 22.54px;
    z-index: 1;
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Use these classes to apply various background colors to your button component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Outline Icon Buttons

Icon Button Sizes

<button type="button" class="btn btn-icon" aria-label="Icon Button">
    <i class="fa-duotone fa-heart-half icon"></i>
</button>
:root {
    --light-glow-1: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-base-transparent-8: rgba(255, 255, 255, 0.8);
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
    --default-button-border-radius: 6px;
    --default-button-rounded-btn-border-radius: 6px;
    --default-button-circled-btn-border-radius: 50%;
    --light-button-btn-group-seperated-border-background-color: #d2d2d2;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --dark-button-btn-group-seperated-border-background-color: #918e99;
    --dark-button-btn-background-color: #21242b;
    --dark-button-btn-background-hover-color: #2e3136;
    --dark-button-btn-background-active-color: #3b3d41;
    --dark-button-btn-background-actived-color: #4a4a4b;
    --dark-button-btn-text-color: #f6f6f6;
    --dark-button-btn-text-hover-color: #f6f6f6;
    --dark-button-btn-text-active-color: #f6f6f6;
    --dark-button-btn-text-actived-color: #a2a1ff;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-icon-btn-width-height: 42px;
    --button-icon-btn-padding: 0;
    --button-icon-btn-xl-width-height: 54px;
    --button-icon-btn-xl-padding: 0;
    --button-icon-btn-lg-width-height: 48px;
    --button-icon-btn-lg-padding: 0;
    --button-icon-btn-sm-width-height: 36px;
    --button-icon-btn-sm-padding: 0;
    --button-icon-btn-xsm-width-height: 30px;
    --button-icon-btn-xsm-padding: 0;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-icon, .btn:first-child.btn-icon, .btn.btn-icon, .btn:last-child.btn-icon, :not(.btn-check) + .btn.btn-icon {
    width: var(--button-icon-btn-width-height);
    aspect-ratio: 1;
    padding: var(--button-icon-btn-padding);
}
.btn.btn-icon .icon, .btn.btn-icon i, .btn:first-child.btn-icon .icon, .btn:first-child.btn-icon i, .btn.btn-icon .icon, .btn.btn-icon i, .btn:last-child.btn-icon .icon, .btn:last-child.btn-icon i, :not(.btn-check) + .btn.btn-icon .icon, :not(.btn-check) + .btn.btn-icon i {
    font-size: 19.6px;
    line-height: 22.54px;
    z-index: 1;
}
.btn.btn-icon.btn-xl, .btn:first-child.btn-icon.btn-xl, .btn.btn-icon.btn-xl, .btn:last-child.btn-icon.btn-xl, :not(.btn-check) + .btn.btn-icon.btn-xl {
    width: var(--button-icon-btn-xl-width-height) !important;
    padding: var(--button-icon-btn-xl-padding) !important;
}
.btn.btn-icon.btn-xl .icon, .btn.btn-icon.btn-xl i, .btn:first-child.btn-icon.btn-xl .icon, .btn:first-child.btn-icon.btn-xl i, .btn.btn-icon.btn-xl .icon, .btn.btn-icon.btn-xl i, .btn:last-child.btn-icon.btn-xl .icon, .btn:last-child.btn-icon.btn-xl i, :not(.btn-check) + .btn.btn-icon.btn-xl .icon, :not(.btn-check) + .btn.btn-icon.btn-xl i {
    font-size: 25.9px;
    line-height: 29.785px;
}
.btn.btn-icon.btn-lg, .btn:first-child.btn-icon.btn-lg, .btn.btn-icon.btn-lg, .btn:last-child.btn-icon.btn-lg, :not(.btn-check) + .btn.btn-icon.btn-lg {
    width: var(--button-icon-btn-lg-width-height) !important;
    padding: var(--button-icon-btn-lg-padding) !important;
}
.btn.btn-icon.btn-lg .icon, .btn.btn-icon.btn-lg i, .btn:first-child.btn-icon.btn-lg .icon, .btn:first-child.btn-icon.btn-lg i, .btn.btn-icon.btn-lg .icon, .btn.btn-icon.btn-lg i, .btn:last-child.btn-icon.btn-lg .icon, .btn:last-child.btn-icon.btn-lg i, :not(.btn-check) + .btn.btn-icon.btn-lg .icon, :not(.btn-check) + .btn.btn-icon.btn-lg i {
    font-size: 22.75px;
    line-height: 26.1625px;
}
.btn.btn-icon.btn-sm, .btn:first-child.btn-icon.btn-sm, .btn.btn-icon.btn-sm, .btn:last-child.btn-icon.btn-sm, :not(.btn-check) + .btn.btn-icon.btn-sm {
    width: var(--button-icon-btn-sm-width-height) !important;
    padding: var(--button-icon-btn-sm-padding) !important;
}
.btn.btn-icon.btn-sm .icon, .btn.btn-icon.btn-sm i, .btn:first-child.btn-icon.btn-sm .icon, .btn:first-child.btn-icon.btn-sm i, .btn.btn-icon.btn-sm .icon, .btn.btn-icon.btn-sm i, .btn:last-child.btn-icon.btn-sm .icon, .btn:last-child.btn-icon.btn-sm i, :not(.btn-check) + .btn.btn-icon.btn-sm .icon, :not(.btn-check) + .btn.btn-icon.btn-sm i {
    font-size: 16.8px;
    line-height: 19.32px;
}
.btn.btn-icon.btn-xsm, .btn:first-child.btn-icon.btn-xsm, .btn.btn-icon.btn-xsm, .btn:last-child.btn-icon.btn-xsm, :not(.btn-check) + .btn.btn-icon.btn-xsm {
    width: var(--button-icon-btn-xsm-width-height) !important;
    padding: var(--button-icon-btn-xsm-padding) !important;
}
.btn.btn-icon.btn-xsm .icon, .btn.btn-icon.btn-xsm i, .btn:first-child.btn-icon.btn-xsm .icon, .btn:first-child.btn-icon.btn-xsm i, .btn.btn-icon.btn-xsm .icon, .btn.btn-icon.btn-xsm i, .btn:last-child.btn-icon.btn-xsm .icon, .btn:last-child.btn-icon.btn-xsm i, :not(.btn-check) + .btn.btn-icon.btn-xsm .icon, :not(.btn-check) + .btn.btn-icon.btn-xsm i {
    font-size: 14px;
    line-height: 16.1px;
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Use the following classes to adjust the size of buttons, ensuring they fit well across different screen sizes and contexts.

  • btn-xl: Extra-large button for prominent actions, typically used on larger screens or for important calls-to-action.
  • btn-lg: Large button, ideal for drawing attention without being too dominant.
  • btn-sm: Small button for compact spaces or secondary actions.
  • btn-xsm: Extra-small button for minimal space usage or subtle actions.

These classes can be applied to buttons to maintain a responsive and consistent design across various screen sizes.

Circled Icon Buttons

<button type="button" class="btn btn-icon btn-circled" aria-label="Icon Button">
    <i class="fa-duotone fa-heart-half icon"></i>
</button>
:root {
    --light-glow-1: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-base-transparent-8: rgba(255, 255, 255, 0.8);
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
    --default-button-border-radius: 6px;
    --default-button-rounded-btn-border-radius: 6px;
    --default-button-circled-btn-border-radius: 50%;
    --light-button-btn-group-seperated-border-background-color: #d2d2d2;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --dark-button-btn-group-seperated-border-background-color: #918e99;
    --dark-button-btn-background-color: #21242b;
    --dark-button-btn-background-hover-color: #2e3136;
    --dark-button-btn-background-active-color: #3b3d41;
    --dark-button-btn-background-actived-color: #4a4a4b;
    --dark-button-btn-text-color: #f6f6f6;
    --dark-button-btn-text-hover-color: #f6f6f6;
    --dark-button-btn-text-active-color: #f6f6f6;
    --dark-button-btn-text-actived-color: #a2a1ff;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-icon-btn-width-height: 42px;
    --button-icon-btn-padding: 0;
    --button-icon-btn-xl-width-height: 54px;
    --button-icon-btn-xl-padding: 0;
    --button-icon-btn-lg-width-height: 48px;
    --button-icon-btn-lg-padding: 0;
    --button-icon-btn-sm-width-height: 36px;
    --button-icon-btn-sm-padding: 0;
    --button-icon-btn-xsm-width-height: 30px;
    --button-icon-btn-xsm-padding: 0;
    --default-button-circled-btn-border-radius: 50%;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-icon, .btn:first-child.btn-icon, .btn.btn-icon, .btn:last-child.btn-icon, :not(.btn-check) + .btn.btn-icon {
    width: var(--button-icon-btn-width-height);
    aspect-ratio: 1;
    padding: var(--button-icon-btn-padding);
}
.btn.btn-icon .icon, .btn.btn-icon i, .btn:first-child.btn-icon .icon, .btn:first-child.btn-icon i, .btn.btn-icon .icon, .btn.btn-icon i, .btn:last-child.btn-icon .icon, .btn:last-child.btn-icon i, :not(.btn-check) + .btn.btn-icon .icon, :not(.btn-check) + .btn.btn-icon i {
    font-size: 19.6px;
    line-height: 22.54px;
    z-index: 1;
}
.btn.btn-icon.btn-xl, .btn:first-child.btn-icon.btn-xl, .btn.btn-icon.btn-xl, .btn:last-child.btn-icon.btn-xl, :not(.btn-check) + .btn.btn-icon.btn-xl {
    width: var(--button-icon-btn-xl-width-height) !important;
    padding: var(--button-icon-btn-xl-padding) !important;
}
.btn.btn-icon.btn-xl .icon, .btn.btn-icon.btn-xl i, .btn:first-child.btn-icon.btn-xl .icon, .btn:first-child.btn-icon.btn-xl i, .btn.btn-icon.btn-xl .icon, .btn.btn-icon.btn-xl i, .btn:last-child.btn-icon.btn-xl .icon, .btn:last-child.btn-icon.btn-xl i, :not(.btn-check) + .btn.btn-icon.btn-xl .icon, :not(.btn-check) + .btn.btn-icon.btn-xl i {
    font-size: 25.9px;
    line-height: 29.785px;
}
.btn.btn-icon.btn-lg, .btn:first-child.btn-icon.btn-lg, .btn.btn-icon.btn-lg, .btn:last-child.btn-icon.btn-lg, :not(.btn-check) + .btn.btn-icon.btn-lg {
    width: var(--button-icon-btn-lg-width-height) !important;
    padding: var(--button-icon-btn-lg-padding) !important;
}
.btn.btn-icon.btn-lg .icon, .btn.btn-icon.btn-lg i, .btn:first-child.btn-icon.btn-lg .icon, .btn:first-child.btn-icon.btn-lg i, .btn.btn-icon.btn-lg .icon, .btn.btn-icon.btn-lg i, .btn:last-child.btn-icon.btn-lg .icon, .btn:last-child.btn-icon.btn-lg i, :not(.btn-check) + .btn.btn-icon.btn-lg .icon, :not(.btn-check) + .btn.btn-icon.btn-lg i {
    font-size: 22.75px;
    line-height: 26.1625px;
}
.btn.btn-icon.btn-sm, .btn:first-child.btn-icon.btn-sm, .btn.btn-icon.btn-sm, .btn:last-child.btn-icon.btn-sm, :not(.btn-check) + .btn.btn-icon.btn-sm {
    width: var(--button-icon-btn-sm-width-height) !important;
    padding: var(--button-icon-btn-sm-padding) !important;
}
.btn.btn-icon.btn-sm .icon, .btn.btn-icon.btn-sm i, .btn:first-child.btn-icon.btn-sm .icon, .btn:first-child.btn-icon.btn-sm i, .btn.btn-icon.btn-sm .icon, .btn.btn-icon.btn-sm i, .btn:last-child.btn-icon.btn-sm .icon, .btn:last-child.btn-icon.btn-sm i, :not(.btn-check) + .btn.btn-icon.btn-sm .icon, :not(.btn-check) + .btn.btn-icon.btn-sm i {
    font-size: 16.8px;
    line-height: 19.32px;
}
.btn.btn-icon.btn-xsm, .btn:first-child.btn-icon.btn-xsm, .btn.btn-icon.btn-xsm, .btn:last-child.btn-icon.btn-xsm, :not(.btn-check) + .btn.btn-icon.btn-xsm {
    width: var(--button-icon-btn-xsm-width-height) !important;
    padding: var(--button-icon-btn-xsm-padding) !important;
}
.btn.btn-icon.btn-xsm .icon, .btn.btn-icon.btn-xsm i, .btn:first-child.btn-icon.btn-xsm .icon, .btn:first-child.btn-icon.btn-xsm i, .btn.btn-icon.btn-xsm .icon, .btn.btn-icon.btn-xsm i, .btn:last-child.btn-icon.btn-xsm .icon, .btn:last-child.btn-icon.btn-xsm i, :not(.btn-check) + .btn.btn-icon.btn-xsm .icon, :not(.btn-check) + .btn.btn-icon.btn-xsm i {
    font-size: 14px;
    line-height: 16.1px;
}

.btn.btn-circled:not(:first-child), .btn.btn-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-circled:not(:last-child), .btn.btn-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-circled {
  border-radius: var(--default-button-circled-btn-border-radius);
}

/* Media Query For >= 576px */
@media (min-width: 576px) {
    .btn.btn-sm-circled:not(:first-child), .btn.btn-sm-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-sm-circled:not(:last-child), .btn.btn-sm-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-sm-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 768px */
@media (min-width: 768px) {
    .btn.btn-md-circled:not(:first-child), .btn.btn-md-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-md-circled:not(:last-child), .btn.btn-md-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-md-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 992px */
@media (min-width: 992px) {
    .btn.btn-lg-circled:not(:first-child), .btn.btn-lg-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-lg-circled:not(:last-child), .btn.btn-lg-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-lg-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
    .btn.btn-xl-circled:not(:first-child), .btn.btn-xl-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-xl-circled:not(:last-child), .btn.btn-xl-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-xl-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 1400px */
@media (min-width: 1400px) {
    .btn.btn-xxl-circled:not(:first-child), .btn.btn-xxl-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-xxl-circled:not(:last-child), .btn.btn-xxl-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-xxl-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Use these classes to apply different levels of border radius to create circular buttons for various screen sizes.

  • btn-xxl-circled: Large circular button for screens larger than 1400px.
  • btn-xl-circled: Circular button for screens larger than 1200px.
  • btn-lg-circled: Circular button for screens larger than 992px.
  • btn-md-circled: Circular button for screens larger than 768px.
  • btn-sm-circled: Small circular button for screens larger than 576px.

These classes ensure that the buttons maintain their circular shape while adapting to different screen sizes.

Icon Buttons With Tooltip

<button type="button" class="btn btn-icon btn-circled" aria-label="Icon Button With Tooltip">
    <i class="fa-duotone fa-heart-half"></i>
    <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Icon Button With Tooltip"></span>
</button>
:root {
    --global-transparent: transparent;
    --light-glow-1: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-base-transparent-8: rgba(255, 255, 255, 0.8);
    --light-primary: #6562fb;
    --light-primary-hover-background: #7674ff;
    --light-primary-active-background: #5552eb;
    --light-primary-actived-background: #4946d3;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-hover-background: #0dbe54;
    --light-success-1-active-background: #00993d;
    --light-success-1-actived-background: #058839;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-hover-background: #1fcbff;
    --light-info-1-active-background: #03a9db;
    --light-info-1-actived-background: #0594c0;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-hover-background: #ffa32c;
    --light-warning-1-active-background: #ee8904;
    --light-warning-1-actived-background: #da7d04;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-hover-background: #ff3939;
    --light-danger-1-active-background: #eb2121;
    --light-danger-1-actived-background: #da0f0f;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-hover-background: #f5f5ff;
    --light-light-1-active-background: #eeeeee;
    --light-light-1-actived-background: #efeeff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-hover-background: #2e3136;
    --light-dark-1-active-background: #3b3d41;
    --light-dark-1-actived-background: #4a4a4b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
    --default-button-border-radius: 6px;
    --default-button-rounded-btn-border-radius: 6px;
    --default-button-circled-btn-border-radius: 50%;
    --light-button-btn-group-seperated-border-background-color: #d2d2d2;
    --light-button-btn-background-color: #fff;
    --light-button-btn-background-hover-color: #f5f5ff;
    --light-button-btn-background-active-color: #eeeeee;
    --light-button-btn-background-actived-color: #efeeff;
    --light-button-btn-text-color: #535353;
    --light-button-btn-text-hover-color: #535353;
    --light-button-btn-text-active-color: #535353;
    --light-button-btn-text-actived-color: #6562fb;
    --dark-button-btn-group-seperated-border-background-color: #918e99;
    --dark-button-btn-background-color: #21242b;
    --dark-button-btn-background-hover-color: #2e3136;
    --dark-button-btn-background-active-color: #3b3d41;
    --dark-button-btn-background-actived-color: #4a4a4b;
    --dark-button-btn-text-color: #f6f6f6;
    --dark-button-btn-text-hover-color: #f6f6f6;
    --dark-button-btn-text-active-color: #f6f6f6;
    --dark-button-btn-text-actived-color: #a2a1ff;
    --button-btn-gap-between: 6px;
    --button-btn-padding: 6px 16px;
    --button-icon-btn-width-height: 42px;
    --button-icon-btn-padding: 0;
    --button-icon-btn-xl-width-height: 54px;
    --button-icon-btn-xl-padding: 0;
    --button-icon-btn-lg-width-height: 48px;
    --button-icon-btn-lg-padding: 0;
    --button-icon-btn-sm-width-height: 36px;
    --button-icon-btn-sm-padding: 0;
    --button-icon-btn-xsm-width-height: 30px;
    --button-icon-btn-xsm-padding: 0;
    --default-button-circled-btn-border-radius: 50%;
}
.btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--button-btn-padding);
    gap: var(--button-btn-gap-between);
    background-color: var(--light-button-btn-background-color);
    border: 1px solid var(--light-button-btn-background-color);
    border-radius: var(--default-button-border-radius);
    font-size: 15.4px;
    line-height: 23.87px;
    color: var(--light-button-btn-text-color);
}
.btn:active, .btn:first-child:active, .btn:active, .btn:last-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--light-button-btn-background-active-color);
    border: 1px solid var(--light-button-btn-background-active-color);
    color: var(--light-button-btn-text-active-color);
}
.btn.active, .btn:first-child.active, .btn.active, .btn:last-child.active, :not(.btn-check) + .btn.active {
    background-color: var(--light-button-btn-background-actived-color);
    border: 1px solid var(--light-button-btn-background-actived-color);
    color: var(--light-button-btn-text-actived-color);
}
.btn.btn-primary, .btn:first-child.btn-primary, .btn.btn-primary, .btn:last-child.btn-primary, :not(.btn-check) + .btn.btn-primary {
    background-color: var(--light-primary) !important;
    border: 1px solid var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary:active, .btn:first-child.btn-primary:active, .btn.btn-primary:active, .btn:last-child.btn-primary:active, :not(.btn-check) + .btn.btn-primary:active {
    background-color: var(--light-primary-active-background) !important;
    border: 1px solid var(--light-primary-active-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-primary.active, .btn:first-child.btn-primary.active, .btn.btn-primary.active, .btn:last-child.btn-primary.active, :not(.btn-check) + .btn.btn-primary.active {
    background-color: var(--light-primary-actived-background) !important;
    border: 1px solid var(--light-primary-actived-background) !important;
    color: var(--light-primary-text-color) !important;
}
.btn.btn-success, .btn:first-child.btn-success, .btn.btn-success, .btn:last-child.btn-success, :not(.btn-check) + .btn.btn-success {
    background-color: var(--light-success-1) !important;
    border: 1px solid var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success:active, .btn:first-child.btn-success:active, .btn.btn-success:active, .btn:last-child.btn-success:active, :not(.btn-check) + .btn.btn-success:active {
    background-color: var(--light-success-1-active-background) !important;
    border: 1px solid var(--light-success-1-active-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-success.active, .btn:first-child.btn-success.active, .btn.btn-success.active, .btn:last-child.btn-success.active, :not(.btn-check) + .btn.btn-success.active {
    background-color: var(--light-success-1-actived-background) !important;
    border: 1px solid var(--light-success-1-actived-background) !important;
    color: var(--light-success-1-text-color) !important;
}
.btn.btn-info, .btn:first-child.btn-info, .btn.btn-info, .btn:last-child.btn-info, :not(.btn-check) + .btn.btn-info {
    background-color: var(--light-info-1) !important;
    border: 1px solid var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info:active, .btn:first-child.btn-info:active, .btn.btn-info:active, .btn:last-child.btn-info:active, :not(.btn-check) + .btn.btn-info:active {
    background-color: var(--light-info-1-active-background) !important;
    border: 1px solid var(--light-info-1-active-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-info.active, .btn:first-child.btn-info.active, .btn.btn-info.active, .btn:last-child.btn-info.active, :not(.btn-check) + .btn.btn-info.active {
    background-color: var(--light-info-1-actived-background) !important;
    border: 1px solid var(--light-info-1-actived-background) !important;
    color: var(--light-info-1-text-color) !important;
}
.btn.btn-warning, .btn:first-child.btn-warning, .btn.btn-warning, .btn:last-child.btn-warning, :not(.btn-check) + .btn.btn-warning {
    background-color: var(--light-warning-1) !important;
    border: 1px solid var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning:active, .btn:first-child.btn-warning:active, .btn.btn-warning:active, .btn:last-child.btn-warning:active, :not(.btn-check) + .btn.btn-warning:active {
    background-color: var(--light-warning-1-active-background) !important;
    border: 1px solid var(--light-warning-1-active-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-warning.active, .btn:first-child.btn-warning.active, .btn.btn-warning.active, .btn:last-child.btn-warning.active, :not(.btn-check) + .btn.btn-warning.active {
    background-color: var(--light-warning-1-actived-background) !important;
    border: 1px solid var(--light-warning-1-actived-background) !important;
    color: var(--light-warning-1-text-color) !important;
}
.btn.btn-danger, .btn:first-child.btn-danger, .btn.btn-danger, .btn:last-child.btn-danger, :not(.btn-check) + .btn.btn-danger {
    background-color: var(--light-danger-1) !important;
    border: 1px solid var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger:active, .btn:first-child.btn-danger:active, .btn.btn-danger:active, .btn:last-child.btn-danger:active, :not(.btn-check) + .btn.btn-danger:active {
    background-color: var(--light-danger-1-active-background) !important;
    border: 1px solid var(--light-danger-1-active-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-danger.active, .btn:first-child.btn-danger.active, .btn.btn-danger.active, .btn:last-child.btn-danger.active, :not(.btn-check) + .btn.btn-danger.active {
    background-color: var(--light-danger-1-actived-background) !important;
    border: 1px solid var(--light-danger-1-actived-background) !important;
    color: var(--light-danger-1-text-color) !important;
}
.btn.btn-light, .btn:first-child.btn-light, .btn.btn-light, .btn:last-child.btn-light, :not(.btn-check) + .btn.btn-light {
    background-color: var(--light-light-1) !important;
    border: 1px solid var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light:active, .btn:first-child.btn-light:active, .btn.btn-light:active, .btn:last-child.btn-light:active, :not(.btn-check) + .btn.btn-light:active {
    background-color: var(--light-light-1-active-background) !important;
    border: 1px solid var(--light-light-1-active-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-light.active, .btn:first-child.btn-light.active, .btn.btn-light.active, .btn:last-child.btn-light.active, :not(.btn-check) + .btn.btn-light.active {
    background-color: var(--light-light-1-actived-background) !important;
    border: 1px solid var(--light-light-1-actived-background) !important;
    color: var(--light-light-1-text-color) !important;
}
.btn.btn-dark, .btn:first-child.btn-dark, .btn.btn-dark, .btn:last-child.btn-dark, :not(.btn-check) + .btn.btn-dark {
    background-color: var(--light-dark-1) !important;
    border: 1px solid var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark:active, .btn:first-child.btn-dark:active, .btn.btn-dark:active, .btn:last-child.btn-dark:active, :not(.btn-check) + .btn.btn-dark:active {
    background-color: var(--light-dark-1-active-background) !important;
    border: 1px solid var(--light-dark-1-active-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-dark.active, .btn:first-child.btn-dark.active, .btn.btn-dark.active, .btn:last-child.btn-dark.active, :not(.btn-check) + .btn.btn-dark.active {
    background-color: var(--light-dark-1-actived-background) !important;
    border: 1px solid var(--light-dark-1-actived-background) !important;
    color: var(--light-dark-1-text-color) !important;
}
.btn.btn-icon, .btn:first-child.btn-icon, .btn.btn-icon, .btn:last-child.btn-icon, :not(.btn-check) + .btn.btn-icon {
    width: var(--button-icon-btn-width-height);
    aspect-ratio: 1;
    padding: var(--button-icon-btn-padding);
}
.btn.btn-icon .icon, .btn.btn-icon i, .btn:first-child.btn-icon .icon, .btn:first-child.btn-icon i, .btn.btn-icon .icon, .btn.btn-icon i, .btn:last-child.btn-icon .icon, .btn:last-child.btn-icon i, :not(.btn-check) + .btn.btn-icon .icon, :not(.btn-check) + .btn.btn-icon i {
    font-size: 19.6px;
    line-height: 22.54px;
    z-index: 1;
}
.btn.btn-icon [data-bs-toggle="tooltip"], .btn:first-child.btn-icon [data-bs-toggle="tooltip"], .btn.btn-icon [data-bs-toggle="tooltip"], .btn:last-child.btn-icon [data-bs-toggle="tooltip"], :not(.btn-check) + .btn.btn-icon [data-bs-toggle="tooltip"] {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: var(--global-transparent);
    width: 100%;
    height: 100%;
    z-index: 2;
}
.btn.btn-icon.btn-xl, .btn:first-child.btn-icon.btn-xl, .btn.btn-icon.btn-xl, .btn:last-child.btn-icon.btn-xl, :not(.btn-check) + .btn.btn-icon.btn-xl {
    width: var(--button-icon-btn-xl-width-height) !important;
    padding: var(--button-icon-btn-xl-padding) !important;
}
.btn.btn-icon.btn-xl .icon, .btn.btn-icon.btn-xl i, .btn:first-child.btn-icon.btn-xl .icon, .btn:first-child.btn-icon.btn-xl i, .btn.btn-icon.btn-xl .icon, .btn.btn-icon.btn-xl i, .btn:last-child.btn-icon.btn-xl .icon, .btn:last-child.btn-icon.btn-xl i, :not(.btn-check) + .btn.btn-icon.btn-xl .icon, :not(.btn-check) + .btn.btn-icon.btn-xl i {
    font-size: 25.9px;
    line-height: 29.785px;
}
.btn.btn-icon.btn-lg, .btn:first-child.btn-icon.btn-lg, .btn.btn-icon.btn-lg, .btn:last-child.btn-icon.btn-lg, :not(.btn-check) + .btn.btn-icon.btn-lg {
    width: var(--button-icon-btn-lg-width-height) !important;
    padding: var(--button-icon-btn-lg-padding) !important;
}
.btn.btn-icon.btn-lg .icon, .btn.btn-icon.btn-lg i, .btn:first-child.btn-icon.btn-lg .icon, .btn:first-child.btn-icon.btn-lg i, .btn.btn-icon.btn-lg .icon, .btn.btn-icon.btn-lg i, .btn:last-child.btn-icon.btn-lg .icon, .btn:last-child.btn-icon.btn-lg i, :not(.btn-check) + .btn.btn-icon.btn-lg .icon, :not(.btn-check) + .btn.btn-icon.btn-lg i {
    font-size: 22.75px;
    line-height: 26.1625px;
}
.btn.btn-icon.btn-sm, .btn:first-child.btn-icon.btn-sm, .btn.btn-icon.btn-sm, .btn:last-child.btn-icon.btn-sm, :not(.btn-check) + .btn.btn-icon.btn-sm {
    width: var(--button-icon-btn-sm-width-height) !important;
    padding: var(--button-icon-btn-sm-padding) !important;
}
.btn.btn-icon.btn-sm .icon, .btn.btn-icon.btn-sm i, .btn:first-child.btn-icon.btn-sm .icon, .btn:first-child.btn-icon.btn-sm i, .btn.btn-icon.btn-sm .icon, .btn.btn-icon.btn-sm i, .btn:last-child.btn-icon.btn-sm .icon, .btn:last-child.btn-icon.btn-sm i, :not(.btn-check) + .btn.btn-icon.btn-sm .icon, :not(.btn-check) + .btn.btn-icon.btn-sm i {
    font-size: 16.8px;
    line-height: 19.32px;
}
.btn.btn-icon.btn-xsm, .btn:first-child.btn-icon.btn-xsm, .btn.btn-icon.btn-xsm, .btn:last-child.btn-icon.btn-xsm, :not(.btn-check) + .btn.btn-icon.btn-xsm {
    width: var(--button-icon-btn-xsm-width-height) !important;
    padding: var(--button-icon-btn-xsm-padding) !important;
}
.btn.btn-icon.btn-xsm .icon, .btn.btn-icon.btn-xsm i, .btn:first-child.btn-icon.btn-xsm .icon, .btn:first-child.btn-icon.btn-xsm i, .btn.btn-icon.btn-xsm .icon, .btn.btn-icon.btn-xsm i, .btn:last-child.btn-icon.btn-xsm .icon, .btn:last-child.btn-icon.btn-xsm i, :not(.btn-check) + .btn.btn-icon.btn-xsm .icon, :not(.btn-check) + .btn.btn-icon.btn-xsm i {
    font-size: 14px;
    line-height: 16.1px;
}

.btn.btn-circled:not(:first-child), .btn.btn-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-circled:not(:last-child), .btn.btn-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-circled {
  border-radius: var(--default-button-circled-btn-border-radius);
}

/* Media Query For >= 576px */
@media (min-width: 576px) {
    .btn.btn-sm-circled:not(:first-child), .btn.btn-sm-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-sm-circled:not(:last-child), .btn.btn-sm-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-sm-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 768px */
@media (min-width: 768px) {
    .btn.btn-md-circled:not(:first-child), .btn.btn-md-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-md-circled:not(:last-child), .btn.btn-md-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-md-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 992px */
@media (min-width: 992px) {
    .btn.btn-lg-circled:not(:first-child), .btn.btn-lg-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-lg-circled:not(:last-child), .btn.btn-lg-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-lg-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 1200px */
@media (min-width: 1200px) {
    .btn, .btn:first-child, .btn, .btn:last-child, :not(.btn-check) + .btn {
        background-color: var(--light-button-btn-background-color);
        border-color: var(--light-button-btn-background-color);
        color: var(--light-button-btn-text-color);
    }
    .btn:hover:not(:active):not(.active), .btn:first-child:hover:not(:active):not(.active), .btn:hover:not(:active):not(.active), .btn:last-child:hover:not(:active):not(.active), :not(.btn-check) + .btn:hover:not(:active):not(.active) {
        background-color: var(--light-button-btn-background-hover-color);
        border-color: var(--light-button-btn-background-hover-color);
        color: var(--light-button-btn-text-hover-color);
    }
    .btn:focus:not(:active):not(.active), .btn:first-child:focus:not(:active):not(.active), .btn:focus:not(:active):not(.active), .btn:last-child:focus:not(:active):not(.active), :not(.btn-check) + .btn:focus:not(:active):not(.active) {
        box-shadow: var(--light-glow-1);
    }
    .btn.btn-primary:hover:not(:active):not(.active), .btn:first-child.btn-primary:hover:not(:active):not(.active), .btn.btn-primary:hover:not(:active):not(.active), .btn:last-child.btn-primary:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-primary:hover:not(:active):not(.active) {
        background-color: var(--light-primary-hover-background) !important;
        border-color: var(--light-primary-hover-background) !important;
        color: var(--light-primary-text-color) !important;
    }
    .btn.btn-primary:focus, .btn:first-child.btn-primary:focus, .btn.btn-primary:focus, .btn:last-child.btn-primary:focus, :not(.btn-check) + .btn.btn-primary:focus {
        box-shadow: var(--light-primary-glow) !important;
    }
    .btn.btn-success:hover:not(:active):not(.active), .btn:first-child.btn-success:hover:not(:active):not(.active), .btn.btn-success:hover:not(:active):not(.active), .btn:last-child.btn-success:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-success:hover:not(:active):not(.active) {
        background-color: var(--light-success-1-hover-background) !important;
        border-color: var(--light-success-1-hover-background) !important;
        color: var(--light-success-1-text-color) !important;
    }
    .btn.btn-success:focus, .btn:first-child.btn-success:focus, .btn.btn-success:focus, .btn:last-child.btn-success:focus, :not(.btn-check) + .btn.btn-success:focus {
        box-shadow: var(--light-success-1-glow) !important;
    }
    .btn.btn-info:hover:not(:active):not(.active), .btn:first-child.btn-info:hover:not(:active):not(.active), .btn.btn-info:hover:not(:active):not(.active), .btn:last-child.btn-info:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-info:hover:not(:active):not(.active) {
        background-color: var(--light-info-1-hover-background) !important;
        border-color: var(--light-info-1-hover-background) !important;
        color: var(--light-info-1-text-color) !important;
    }
    .btn.btn-info:focus, .btn:first-child.btn-info:focus, .btn.btn-info:focus, .btn:last-child.btn-info:focus, :not(.btn-check) + .btn.btn-info:focus {
        box-shadow: var(--light-info-1-glow) !important;
    }
    .btn.btn-warning:hover:not(:active):not(.active), .btn:first-child.btn-warning:hover:not(:active):not(.active), .btn.btn-warning:hover:not(:active):not(.active), .btn:last-child.btn-warning:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-warning:hover:not(:active):not(.active) {
        background-color: var(--light-warning-1-hover-background) !important;
        border-color: var(--light-warning-1-hover-background) !important;
        color: var(--light-warning-1-text-color) !important;
    }
    .btn.btn-warning:focus, .btn:first-child.btn-warning:focus, .btn.btn-warning:focus, .btn:last-child.btn-warning:focus, :not(.btn-check) + .btn.btn-warning:focus {
        box-shadow: var(--light-warning-1-glow) !important;
    }
    .btn.btn-danger:hover:not(:active):not(.active), .btn:first-child.btn-danger:hover:not(:active):not(.active), .btn.btn-danger:hover:not(:active):not(.active), .btn:last-child.btn-danger:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-danger:hover:not(:active):not(.active) {
        background-color: var(--light-danger-1-hover-background) !important;
        border-color: var(--light-danger-1-hover-background) !important;
        color: var(--light-danger-1-text-color) !important;
    }
    .btn.btn-danger:focus, .btn:first-child.btn-danger:focus, .btn.btn-danger:focus, .btn:last-child.btn-danger:focus, :not(.btn-check) + .btn.btn-danger:focus {
        box-shadow: var(--light-danger-1-glow) !important;
    }
    .btn.btn-light:hover:not(:active):not(.active), .btn:first-child.btn-light:hover:not(:active):not(.active), .btn.btn-light:hover:not(:active):not(.active), .btn:last-child.btn-light:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-light:hover:not(:active):not(.active) {
        background-color: var(--light-light-1-hover-background) !important;
        border-color: var(--light-light-1-hover-background) !important;
        color: var(--light-light-1-text-color) !important;
    }
    .btn.btn-light:focus, .btn:first-child.btn-light:focus, .btn.btn-light:focus, .btn:last-child.btn-light:focus, :not(.btn-check) + .btn.btn-light:focus {
        box-shadow: var(--light-light-1-glow) !important;
    }
    .btn.btn-dark:hover:not(:active):not(.active), .btn:first-child.btn-dark:hover:not(:active):not(.active), .btn.btn-dark:hover:not(:active):not(.active), .btn:last-child.btn-dark:hover:not(:active):not(.active), :not(.btn-check) + .btn.btn-dark:hover:not(:active):not(.active) {
        background-color: var(--light-dark-1-hover-background) !important;
        border-color: var(--light-dark-1-hover-background) !important;
        color: var(--light-dark-1-text-color) !important;
    }
    .btn.btn-dark:focus, .btn:first-child.btn-dark:focus, .btn.btn-dark:focus, .btn:last-child.btn-dark:focus, :not(.btn-check) + .btn.btn-dark:focus {
        box-shadow: var(--light-dark-1-glow) !important;
    }
    .btn.btn-xl-circled:not(:first-child), .btn.btn-xl-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-xl-circled:not(:last-child), .btn.btn-xl-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-xl-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}

/* Media Query For >= 1400px */
@media (min-width: 1400px) {
    .btn.btn-xxl-circled:not(:first-child), .btn.btn-xxl-circled:not(:first-child):not(.dropdown-toggle), .btn.btn-xxl-circled:not(:last-child), .btn.btn-xxl-circled:not(:last-child):not(.dropdown-toggle), .btn.btn-xxl-circled {
        border-radius: var(--default-button-circled-btn-border-radius);
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Use these classes to apply various background colors to your button component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.