Bootstrap Buttons
Good customizes the
Bootstrap Buttons through the SASS variables in
src/sass/components/_variables.scssand adds additonal options in
src/sass/components/buttons/.Base Buttons
Use
.btn-{color}Bootstrap Button class to set base button base color defined with
$theme-colorsmapped in
src/sass/components/_variables.scss:
<a href="#" class="btn btn-white">White</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-dark">Dark</a>
Hover Effects
Use
.btn-hover-{effect}class to set variouse hover effects for a button:
<a href="#" class="btn btn-primary btn-hover-rise me-5">Rise</a>
<a href="#" class="btn btn-danger btn-hover-scale me-5">Scale</a>
<a href="#" class="btn btn-success btn-hover-rotate-end">Rotate to end</a>
<a href="#" class="btn btn-warning btn-hover-rotate-start">Rotate to start</a>
Light Style
Use
.btn-light-{color}Bootstrap Button class to set a button's light style defined with
$theme-light-colorsmapped in
src/sass/components/_variables.scss:
<a href="#" class="btn btn-light-primary">Primary</a>
<a href="#" class="btn btn-light-success">Success</a>
<a href="#" class="btn btn-light-info">Info</a>
<a href="#" class="btn btn-light-warning">Warning</a>
<a href="#" class="btn btn-light-danger">Danger</a>
<a href="#" class="btn btn-light-dark">Dark</a>
Background Style
Use
.btn-bg-{color}Bootstrap Button class to set a button's background color only without hover or active states:
<a href="#" class="btn btn-bg-white">White</a>
<a href="#" class="btn btn-bg-primary">Primary</a>
<a href="#" class="btn btn-bg-light">Light</a>
<a href="#" class="btn btn-bg-secondary">Secondary</a>
<a href="#" class="btn btn-bg-success">Success</a>
<a href="#" class="btn btn-bg-info">Info</a>
<a href="#" class="btn btn-bg-warning">Warning</a>
<a href="#" class="btn btn-bg-danger">Danger</a>
<a href="#" class="btn btn-bg-dark">Dark</a>
Outline Dashed Style
Use
.btn-outlineand
.btn-outline-dashedBootstrap Button classes with the standard outline theme color
.btn-outline-{color}and
.btn-active-light-{color}classes to have a button with outline dashed border style:
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-default me-2 mb-2">Default</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary">Primary</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-success btn-active-light-success">Success</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-info btn-active-light-info">Info</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-warning btn-active-light-warning">Warning</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-danger btn-active-light-danger">Danger</a>
<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-dark btn-active-light-dark">Dark</a>
Color Style
Use
.btn-color-{text-color}Bootstrap Button class to set a button's text and icon colors only:
<a href="#" class="btn btn-bg-dark btn-color-white">White</a>
<a href="#" class="btn btn-bg-light btn-color-primary">Primary</a>
<a href="#" class="btn btn-bg-dark btn-color-secondary">Secondary</a>
<a href="#" class="btn btn-bg-dark btn-color-light">Light</a>
<a href="#" class="btn btn-bg-light btn-color-success">Success</a>
<a href="#" class="btn btn-bg-light btn-color-info">Info</a>
<a href="#" class="btn btn-bg-light btn-color-warning">Warning</a>
<a href="#" class="btn btn-bg-light btn-color-danger">Danger</a>
<a href="#" class="btn btn-bg-light btn-color-dark">Dark</a>
<a href="#" class="btn btn-bg-light btn-color-muted">Muted</a>
<a href="#" class="btn btn-bg-dark btn-color-gray-100">Gray-100</a>
<a href="#" class="btn btn-bg-dark btn-color-gray-200">Gray-200</a>
<a href="#" class="btn btn-bg-dark btn-color-gray-300">Gray-300</a>
<a href="#" class="btn btn-bg-light btn-color-gray-400">Gray-400</a>
<a href="#" class="btn btn-bg-light btn-color-gray-500">Gray-500</a>
<a href="#" class="btn btn-bg-light btn-color-gray-600">Gray-600</a>
<a href="#" class="btn btn-bg-light btn-color-gray-700">Gray-700</a>
<a href="#" class="btn btn-bg-light btn-color-gray-800">Gray-800</a>
<a href="#" class="btn btn-bg-light btn-color-gray-900">Gray-900</a>
Icon & Text Color Styles
Use
.btn-icon-{text-color}and
.btn-text-{text-color}Bootstrap Button classes to set a button's icon and text colors separately:
<a href="#" class="btn btn-icon-white btn-text-white"><span class="svg-icon svg-icon-1"><svg>...</svg></span>White</a>
<a href="#" class="btn btn-icon-primary btn-text-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Primary</a>
<a href="#" class="btn btn-icon-secondary btn-text-secondary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Secondary</a>
<a href="#" class="btn btn-icon-light btn-text-light"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Light</a>
<a href="#" class="btn btn-icon-success btn-text-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Success</a>
<a href="#" class="btn btn-icon-info btn-text-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Info</a>
<a href="#" class="btn btn-icon-warning btn-text-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Warning</a>
<a href="#" class="btn btn-icon-danger btn-text-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Danger</a>
<a href="#" class="btn btn-icon-dark btn-text-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Dark</a>
<a href="#" class="btn btn-icon-muted btn-text-muted"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Muted</a>
<a href="#" class="btn btn-icon-gray-100 btn-text-gray-100"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-100</a>
<a href="#" class="btn btn-icon-gray-200 btn-text-gray-200"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-200</a>
<a href="#" class="btn btn-icon-gray-300 btn-text-gray-300"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-300</a>
<a href="#" class="btn btn-icon-gray-400 btn-text-gray-400"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-400</a>
<a href="#" class="btn btn-icon-gray-500 btn-text-gray-500"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-500</a>
<a href="#" class="btn btn-icon-gray-600 btn-text-gray-600"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-600</a>
<a href="#" class="btn btn-icon-gray-700 btn-text-gray-700"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-700</a>
<a href="#" class="btn btn-icon-gray-800 btn-text-gray-800"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-800</a>
<a href="#" class="btn btn-icon-gray-900 btn-text-gray-900"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-900</a>
Active Style
Use
.btn-active-{color}Bootstrap Button class to set a button's color for active & hover states only:
<a href="#" class="btn btn-active-white">White</a>
<a href="#" class="btn btn-active-primary">Primary</a>
<a href="#" class="btn btn-active-light">Light</a>
<a href="#" class="btn btn-active-secondary">Secondary</a>
<a href="#" class="btn btn-active-success">Success</a>
<a href="#" class="btn btn-active-info">Info</a>
<a href="#" class="btn btn-active-warning">Warning</a>
<a href="#" class="btn btn-active-danger">Danger</a>
<a href="#" class="btn btn-active-dark">Dark</a>
Active Light Style
Use
.btn-active-light-{color}Bootstrap Button class to set a button's light color for active & hover states only:
<a href="#" class="btn btn-active-light-primary">Primary</a>
<a href="#" class="btn btn-active-light-success">Success</a>
<a href="#" class="btn btn-active-light-info">Info</a>
<a href="#" class="btn btn-active-light-warning">Warning</a>
<a href="#" class="btn btn-active-light-danger">Danger</a>
<a href="#" class="btn btn-active-light-dark">Dark</a>
Active Color Style
Use
.btn-active-color-{color}Bootstrap Button class to set a button's text and icon colors for active and hover states only:
<a href="#" class="btn btn-bg-light btn-active-color-white">White</a>
<a href="#" class="btn btn-bg-light btn-active-color-primary">Primary</a>
<a href="#" class="btn btn-bg-light btn-active-color-secondary">Secondary</a>
<a href="#" class="btn btn-bg-light btn-active-color-light">Light</a>
<a href="#" class="btn btn-bg-light btn-active-color-success">Success</a>
<a href="#" class="btn btn-bg-light btn-active-color-info">Info</a>
<a href="#" class="btn btn-bg-light btn-active-color-warning">Warning</a>
<a href="#" class="btn btn-bg-light btn-active-color-danger">Danger</a>
<a href="#" class="btn btn-bg-light btn-active-color-dark">Dark</a>
<a href="#" class="btn btn-bg-light btn-active-color-muted">Muted</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-100">Gray-100</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-200">Gray-200</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-300">Gray-300</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-400">Gray-400</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-500">Gray-500</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-600">Gray-600</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-700">Gray-700</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-800">Gray-800</a>
<a href="#" class="btn btn-bg-light btn-active-color-gray-900">Gray-900</a>
Active Icon & Text Color Styles
Use
.btn-active-icon-{color}and
.btn-active-text-{color}Bootstrap Button classes to set a button's icon and text colors separately for active and hover states:
<a href="#" class="btn btn-active-icon-white btn-active-text-white"><span class="svg-icon svg-icon-1"><svg>...</svg></span>White</a>
<a href="#" class="btn btn-active-icon-primary btn-active-text-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Primary</a>
<a href="#" class="btn btn-active-icon-secondary btn-active-text-secondary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Secondary</a>
<a href="#" class="btn btn-active-icon-light btn-active-text-light"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Light</a>
<a href="#" class="btn btn-active-icon-success btn-active-text-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Success</a>
<a href="#" class="btn btn-active-icon-info btn-active-text-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Info</a>
<a href="#" class="btn btn-active-icon-warning btn-active-text-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Warning</a>
<a href="#" class="btn btn-active-icon-danger btn-active-text-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Danger</a>
<a href="#" class="btn btn-active-icon-dark btn-active-text-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Dark</a>
<a href="#" class="btn btn-active-icon-muted btn-active-text-muted"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Muted</a>
<a href="#" class="btn btn-active-icon-gray-100 btn-active-text-gray-100"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-100</a>
<a href="#" class="btn btn-active-icon-gray-200 btn-active-text-gray-200"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-200</a>
<a href="#" class="btn btn-active-icon-gray-300 btn-active-text-gray-300"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-300</a>
<a href="#" class="btn btn-active-icon-gray-400 btn-active-text-gray-400"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-400</a>
<a href="#" class="btn btn-active-icon-gray-500 btn-active-text-gray-500"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-500</a>
<a href="#" class="btn btn-active-icon-gray-600 btn-active-text-gray-600"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-600</a>
<a href="#" class="btn btn-active-icon-gray-700 btn-active-text-gray-700"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-700</a>
<a href="#" class="btn btn-active-icon-gray-800 btn-active-text-gray-800"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-800</a>
<a href="#" class="btn btn-active-icon-gray-900 btn-active-text-gray-900"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Gray-900</a>
Icons
Use
Duotune Svg Icons in conbination with buttons as shown below:
<a href="#" class="btn btn-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span>Caption</a>
<a href="#" class="btn btn-icon btn-primary"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-success"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-info"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-warning"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-danger"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
<a href="#" class="btn btn-icon btn-dark"><span class="svg-icon svg-icon-1"><svg>...</svg></span></a>
Use
Bootstrap Icons in conbination with buttons as shown below:
<a href="#" class="btn btn-primary"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-success"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-info"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-warning"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-danger"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-dark"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-primary"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-success"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-info"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-warning"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-dark"><i class="bi bi-chat-square-text-fill fs-4 me-2"></i></a>
Use
Font Awesome Icons in conbination with buttons as shown below:
<a href="#" class="btn btn-primary"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-success"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-info"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-warning"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-danger"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-dark"><i class="fas fa-envelope-open-text fs-4 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-primary"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-success"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-info"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-warning"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
<a href="#" class="btn btn-icon btn-dark"><i class="fas fa-envelope-open-text fs-4 me-2"></i></a>
Use
Line Awesome Icons in conbination with buttons as shown below:
<a href="#" class="btn btn-icon btn-primary"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-success"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-info"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-warning"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-danger"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-dark"><i class="las la-wallet fs-2 me-2"></i> Caption</a>
<a href="#" class="btn btn-icon btn-primary"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-success"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-info"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-warning"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-danger"><i class="las la-wallet fs-2 me-2"></i></a>
<a href="#" class="btn btn-icon btn-dark"><i class="las la-wallet fs-2 me-2"></i></a>
Social Buttons
Use
.btn-{social}and
.btn-light-{social}classes with
Font Awesome or
Bootstrap Icons social icons for supporting buttons with social brand logos and colors.Where
socialis one the below options defined with
$social-colorscustom variable in
src/sass/components/_variables.scss.
-
facebook -
google -
twitter -
instagram -
youtube -
linkedin
<a href="#" class="btn btn-icon btn-facebook me-5 "><i class="fab fa-facebook-f fs-4"></i></a>
<a href="#" class="btn btn-icon btn-google me-5 "><i class="fab fa-google fs-4"></i></a>
<a href="#" class="btn btn-icon btn-twitter me-5 "><i class="fab fa-twitter fs-4"></i></a>
<a href="#" class="btn btn-icon btn-instagram me-5 "><i class="fab fa-instagram fs-4"></i></a>
<a href="#" class="btn btn-icon btn-youtube me-5 "><i class="fab fa-youtube fs-4"></i></a>
<a href="#" class="btn btn-icon btn-linkedin me-5 "><i class="fab fa-linkedin fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-facebook me-5 "><i class="fab fa-facebook-f fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-google me-5 "><i class="fab fa-google fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-twitter me-5 "><i class="fab fa-twitter fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-instagram me-5 "><i class="fab fa-instagram fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-youtube me-5 "><i class="fab fa-youtube fs-4"></i></a>
<a href="#" class="btn btn-icon btn-light-linkedin me-5 "><i class="fab fa-linkedin fs-4"></i></a>
Link Option
Use
.btn-linkBootstrap Button class with any other button classes to set a link buttons without side paddings:
<a href="#" class="btn btn-link btn-color-muted btn-active-color-primary me-5 mb-2">Muted</a>
<a href="#" class="btn btn-link btn-color-gray-500 btn-active-color-primary me-5 mb-2">Gray 500</a>
<a href="#" class="btn btn-link btn-color-info btn-active-color-primary me-5 mb-2">Primary</a>
<a href="#" class="btn btn-link btn-color-success btn-active-color-primary me-5 mb-2">Success</a>
<a href="#" class="btn btn-link btn-color-danger btn-active-color-primary me-5 mb-2">Danger</a>
<a href="#" class="btn btn-link btn-color-warning btn-active-color-primary me-5 mb-2">Warning</a>
Utility Classes
Use
.btn-flushclass to remove paddings, borders, background and rounded corners:
<a href="#" class="btn btn-flush">Flushed button</a>
Use
.btn-flexclass to vertically center button inner elements with
display: inline-flexand
align-items: center:
<a href="#" class="btn btn-flex btn-primary px-6">
<span class="svg-icon svg-icon-2x"><svg>...</svg></span>
<span class="d-flex flex-column align-items-start ms-2">
<span class="fs-3 fw-bolder">Caption</span>
<span class="fs-7">Some description</span>
</span>
</a>
Use
.btn-strip-startand
.btn-strip-endclasses to reset padding edges and align to left or right:
<a href="#" class="btn btn-icon btn-primary btn-trim-start">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
</a>
<a href="#" class="btn btn-icon btn-primary btn-trim-end">
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
</a>
2022©
Keenthemes
