# Documentation v8.0.38

Preview Downloads Purchase

# 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`:
White Primary Light Secondary Success Info Warning Danger Dark

    <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:
Rise Scale Rotate to end Rotate to start

    <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-colors`mapped in `src/sass/components/_variables.scss`:
Primary Success Info Warning Danger Dark

    <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:
White Primary Light Secondary Success Info Warning Danger Dark

    <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-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 Success Info Warning Danger Dark

    <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:
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-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:
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"><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:
White Primary Light Secondary Success Info Warning Danger Dark

    <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:
Primary Success Info Warning Danger Dark

    <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:
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-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:
Caption
Caption
Caption
Caption
Caption
Caption

    <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:
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-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:
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-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:
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-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 `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">
        <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-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">
        <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>

### 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
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

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