Documentation v8.0.36

Preview Downloads Purchase

Bootstrap Buttons

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

Explore

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 939
Custom License
Reach us for custom license offers.
Buy Now
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now