Oliver HTML Pro customizes the
Bootstrap Buttons
through the SASS variables in
src/sass/components/_variables.scss
and adds additonal options in
src/sass/components/buttons/
.
Use .btn-{color}
Bootstrap Button class to set base button base color defined with $theme-colors
mapped in src/sass/components/_variables.scss
:
copy <a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-primary">Primary</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 hover classess to set variouse effects for a button. For more info check out the
Hover component docs.
copy <a href="#" class="btn btn-primary hover-elevate-up">Elevate up</a>
<a href="#" class="btn btn-primary hover-elevate-down">Elevate down</a>
<a href="#" class="btn btn-danger hover-scale">Scale</a>
<a href="#" class="btn btn-success hover-rotate-end">Rotate to end</a>
<a href="#" class="btn btn-warning 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-colors
mapped in src/sass/components/_variables.scss
:
copy <a href="#" class="btn btn-light-primary">Primary</a>
<a href="#" class="btn btn-light-secondary">Secondary</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:
copy <a href="#" class="btn btn-bg-light">Light</a>
<a href="#" class="btn btn-bg-primary">Primary</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>
<a href="#" class="btn bg-body">Body</a>
Outline Dashed Style
Use .btn-outline
and .btn-outline-dashed
Bootstrap 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:
copy <a href="#" class="btn btn-outline btn-outline-dashed 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-secondary btn-active-light-secondary">Secondary</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:
copy <a href="#" class="btn btn-bg-secondary btn-color-white">White</a>
<a href="#" class="btn btn-bg-light btn-color-primary">Primary</a>
<a href="#" class="btn btn-bg-light btn-color-secondary">Secondary</a>
<a href="#" class="btn btn-bg-secondary 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-secondary btn-color-gray-100">Gray-100</a>
<a href="#" class="btn btn-bg-secondary btn-color-gray-200">Gray-200</a>
<a href="#" class="btn btn-bg-secondary 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:
copy <a href="#" class="btn btn-icon-white btn-text-white">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
White
</a>
<a href="#" class="btn btn-icon-primary btn-text-primary">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Primary
</a>
<a href="#" class="btn btn-icon-secondary btn-text-secondary">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Secondary
</a>
<a href="#" class="btn btn-icon-light btn-text-light">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Light
</a>
<a href="#" class="btn btn-icon-success btn-text-success">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Success
</a>
<a href="#" class="btn btn-icon-info btn-text-info">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Info
</a>
<a href="#" class="btn btn-icon-warning btn-text-warning">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Warning
</a>
<a href="#" class="btn btn-icon-danger btn-text-danger">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Danger
</a>
<a href="#" class="btn btn-icon-dark btn-text-dark">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Dark
</a>
<a href="#" class="btn btn-icon-muted btn-text-muted">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Muted
</a>
<a href="#" class="btn btn-icon-gray-100 btn-text-gray-100">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-100
</a>
<a href="#" class="btn btn-icon-gray-200 btn-text-gray-200">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-200
</a>
<a href="#" class="btn btn-icon-gray-300 btn-text-gray-300">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-300
</a>
<a href="#" class="btn btn-icon-gray-400 btn-text-gray-400">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-400
</a>
<a href="#" class="btn btn-icon-gray-500 btn-text-gray-500">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-500
</a>
<a href="#" class="btn btn-icon-gray-600 btn-text-gray-600">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-600
</a>
<a href="#" class="btn btn-icon-gray-700 btn-text-gray-700">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-700
</a>
<a href="#" class="btn btn-icon-gray-800 btn-text-gray-800">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-800
</a>
<a href="#" class="btn btn-icon-gray-900 btn-text-gray-900">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-900
</a>
Active Style
Use .btn-active-{color}
Bootstrap Button class to set a button's color for active & hover states only:
copy <a href="#" class="btn btn-active-light">Light</a>
<a href="#" class="btn btn-active-primary">Primary</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:
copy <a href="#" class="btn btn-active-light-primary">Primary</a>
<a href="#" class="btn btn-active-light-secondary">Secondary</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:
copy <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:
copy <a href="#" class="btn btn-active-icon-white btn-text-white">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
White
</a>
<a href="#" class="btn btn-active-icon-primary btn-text-primary">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Primary
</a>
<a href="#" class="btn btn-active-icon-secondary btn-text-secondary">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Secondary
</a>
<a href="#" class="btn btn-active-icon-light btn-text-light">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Light
</a>
<a href="#" class="btn btn-active-icon-success btn-text-success">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Success
</a>
<a href="#" class="btn btn-active-icon-info btn-text-info">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Info
</a>
<a href="#" class="btn btn-active-icon-warning btn-text-warning">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Warning
</a>
<a href="#" class="btn btn-active-icon-danger btn-text-danger">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Danger
</a>
<a href="#" class="btn btn-active-icon-dark btn-text-dark">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Dark
</a>
<a href="#" class="btn btn-active-icon-muted btn-text-muted">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Muted
</a>
<a href="#" class="btn btn-active-icon-gray-100 btn-text-gray-100">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-100
</a>
<a href="#" class="btn btn-active-icon-gray-200 btn-text-gray-200">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-200
</a>
<a href="#" class="btn btn-active-icon-gray-300 btn-text-gray-300">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-300
</a>
<a href="#" class="btn btn-active-icon-gray-400 btn-text-gray-400">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-400
</a>
<a href="#" class="btn btn-active-icon-gray-500 btn-text-gray-500">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-500
</a>
<a href="#" class="btn btn-active-icon-gray-600 btn-text-gray-600">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-600
</a>
<a href="#" class="btn btn-active-icon-gray-700 btn-text-gray-700">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-700
</a>
<a href="#" class="btn btn-active-icon-gray-800 btn-text-gray-800">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-800
</a>
<a href="#" class="btn btn-active-icon-gray-900 btn-text-gray-900">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
Gray-900
</a>
Sizes
Apply .btn-xs
and .btn-lg
classes to use small and large button options:
Icons
Use our exclusive
Keenicons set in conbination with buttons as shown below:
copy <a href="#" class="btn btn-primary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>
<a href="#" class="btn btn-secondary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>
<a href="#" class="btn btn-success">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>
<a href="#" class="btn btn-info">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>
<a href="#" class="btn btn-warning">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>
<a href="#" class="btn btn-danger">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>
<a href="#" class="btn btn-dark">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
Caption
</a>
<a href="#" class="btn btn-icon btn-primary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>
<a href="#" class="btn btn-icon btn-secondary">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>
<a href="#" class="btn btn-icon btn-success">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>
<a href="#" class="btn btn-icon btn-info">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>
<a href="#" class="btn btn-icon btn-warning">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>
<a href="#" class="btn btn-icon btn-danger">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>
<a href="#" class="btn btn-icon btn-dark">
<i class="ki-duotone ki-chart-simple-2 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
</a>
copy <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-secondary"><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-secondary"><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>
copy <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-secondary"><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-secondary"><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>
copy <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-secondary"><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-secondary"><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>
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
social
is one the below options defined with
$social-colors
custom variable in
src/sass/components/_variables.scss
.
facebook
google
twitter
instagram
youtube
linkedin
Other social colors can be added by referring to
brandcolors.net .
copy <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-link
Bootstrap Button class with any other button classes to set a link buttons without side paddings:
copy <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-flush
class to remove paddings, borders, background and rounded corners:
copy <a href="#" class="btn btn-flush">Flushed button</a>
Use .btn-flex
class to vertically center button inner elements with display: inline-flex
and align-items: center
:
copy <a href="#" class="btn btn-flex btn-primary px-6">
<i class="ki-duotone ki-graph-3 fs-2x"><span class="path1"></span><span class="path2"></span></i>
<span class="d-flex flex-column align-items-start ms-2">
<span class="fs-3 fw-bold">Caption</span>
<span class="fs-7">Some description</span>
</span>
</a>
Use .btn-strip-start
and .btn-strip-end
classes to reset padding edges and align to left or right:
copy <a href="#" class="btn btn-icon btn-primary btn-trim-start">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
</a>
<a href="#" class="btn btn-icon btn-primary btn-trim-end">
<i class="ki-duotone ki-graph-3 fs-1"><span class="path1"></span><span class="path2"></span></i>
</a>