Logo

Documentation v8.2.8

Downloads Preview
Light
Dark
System

Bootstrap Buttons

Metronic customizes the Bootstrap Buttons  through the SASS variables in src/sass/components/_variables.scss and 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-colors mapped in src/sass/components/_variables.scss:
Light Primary Secondary Success Info Warning Danger Dark 
<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.
Elevate up Elevate down Scale Rotate to end Rotate to start 
<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:
Primary Secondary Success Info Warning Danger Dark 
<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:
Light Primary Secondary Success Info Warning Danger Dark Body 
<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:
Default Primary Secondary Success Info Warning Danger Dark 
<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:
White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900 
<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:
White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900 
<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:
Light Primary Secondary Success Info Warning Danger Dark 
<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:
Primary Secondary Success Info Warning Danger Dark 
<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:
White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900 
<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:
White Primary Secondary Light Success Info Warning Danger Dark Muted Gray-100 Gray-200 Gray-300 Gray-400 Gray-500 Gray-600 Gray-700 Gray-800 Gray-900 
<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:
Small Default Large

Icons

Use our exclusive Keenicons set in conbination with buttons as shown below:
Caption Caption Caption Caption Caption Caption Caption 
<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>
Use Bootstrap Icons in conbination with buttons as shown below:
Caption Caption Caption Caption Caption Caption Caption 
<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>
Use Font Awesome Icons in conbination with buttons as shown below:
Caption Caption Caption Caption Caption Caption Caption 
<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>
Use Line Awesome Icons in conbination with buttons as shown below:
Caption Caption Caption Caption Caption Caption Caption 
<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>

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 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. 
<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:
Muted Gray 500 Primary Success Danger Warning 
<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:
Flushed button 
<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:
Caption Some description 
<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: 
<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>
buy metronic buy mega bundle
Preview Get Help Buy Now