Logo

Base Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Use btn-{color}class to set custom color for buttons where {color}can be white|primary|secondary|success|info|warning|danger|light|dark.


                        <button type="button" class="btn btn-primary">Primary</button>
                        <button type="button" class="btn btn-secondary">Secondary</button>
                        <button type="button" class="btn btn-success">Success</button>
                        <button type="button" class="btn btn-danger">Danger</button>
                        <button type="button" class="btn btn-warning">Warning</button>
                        <button type="button" class="btn btn-info">Info</button>
                        <button type="button" class="btn btn-light">Light</button>
                        <button type="button" class="btn btn-dark">Dark</button>
                        <button type="button" class="btn btn-link">Link</button>

Button Tags

The .btnclasses are designed to be used with the <button>element. However, you can also use these classes on <a>or <input>elements (though some browsers may render slightly different).

Link

                        <a class="btn btn-secondary" href="#" role="button">Link</a>
                        <button class="btn btn-secondary" type="submit">Button</button>
                        <input class="btn btn-secondary" type="button" value="Input"/>
                        <input class="btn btn-secondary" type="submit" value="Submit"/>
                        <input class="btn btn-secondary" type="reset" value="Reset"/>

Outline Buttons

Replace the default modifier classes with .btn-outline-*to remove all background images and colors on any button.


                        <button type="button" class="btn btn-outline-primary">Primary</button>
                        <button type="button" class="btn btn-outline-secondary">Secondary</button>
                        <button type="button" class="btn btn-outline-success">Success</button>
                        <button type="button" class="btn btn-outline-danger">Danger</button>
                        <button type="button" class="btn btn-outline-warning">Warning</button>
                        <button type="button" class="btn btn-outline-info">Info</button>
                        <button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lgor .btn-smfor additional sizes.


                        <button type="button" class="btn btn-primary btn-sm">Small button</button>
                        <button type="button" class="btn btn-primary">Default button</button>
                        <button type="button" class="btn btn-primary btn-lg">Large button</button>

Add block type buttons that span the full width of a parent by adding .btn-block.


                        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                        <button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>

States

Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active with .active.


                        <a href="#" class="btn btn-primary active">Active state</a>
                        <a href="#" class="btn btn-success active">Active state</a>
                        <a href="#" class="btn btn-danger active">Active state</a>
                        <a href="#" class="btn btn-warning active">Active state</a>
Disabled State

Make buttons look inactive by adding the disabledboolean attribute to any button element.


                        <button class="btn btn-primary" disabled>Disabled state</button>
                        <button class="btn btn-success" disabled>Disabled state</button>
                        <button class="btn btn-danger" disabled>Disabled state</button>
                        <button class="btn btn-warning" disabled>Disabled state</button>

Checkbox And Radio Buttons

Bootstrap’s button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling.


                        <div class="btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-success active">
                                <input type="checkbox" checked="checked"/> Checked
                            </label>
                        </div>

                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-success active">
                                <input type="radio" name="options" id="option1" checked="checked"/> Active
                            </label>
                            <label class="btn btn-success">
                                <input type="radio" name="options" id="option2"/> Radio
                            </label>
                            <label class="btn btn-success">
                                <input type="radio" name="options" id="option3"/> Radio
                            </label>
                        </div>

Button Font Styles

Button font styles can be set using special helper classes font-weight-{lighter|light|normal|bold|bolder|boldest}.


                        <a href="#" class="btn btn-secondary font-weight-lighter mr-2">Lighter</a>
                        <a href="#" class="btn btn-secondary font-weight-light mr-2">Light</a>
                        <a href="#" class="btn btn-secondary font-weight-normal mr-2">Normal</a>
                        <a href="#" class="btn btn-secondary font-weight-bold mr-2">Bold</a>
                        <a href="#" class="btn btn-secondary font-weight-bolder">Bolder</a>
                        <a href="#" class="btn btn-secondary font-weight-boldest">Boldest</a>
                        

Uppercase and lowercase texts can be set using .text-uppercaseand .text-lowercaseclasses respectively.


                        <a href="#" class="btn btn-secondary text-uppercase mr-2">Uppercase</a>
                        <a href="#" class="btn btn-secondary text-lowercase">Lowercase</a>
                        

Button Styles

Use .btn-squareclasses to have square style buttons.


                        <a href="#" class="btn btn-success font-weight-bold btn-pill">Success</a>
                        <a href="#" class="btn btn-primary font-weight-bold btn-pill">Primary</a>
                        <a href="#" class="btn btn-danger font-weight-bold btn-pill">Danger</a>
                        <a href="#" class="btn btn-warning font-weight-bold btn-pill">Warning</a>
                        <a href="#" class="btn btn-dark font-weight-bold btn-pill">Dark</a>
                        

Use .btn-pillclasses to have pill style buttons.


                        <a href="#" class="btn btn-success font-weight-bold btn-square">Success</a>
                        <a href="#" class="btn btn-primary font-weight-bold btn-square">Primary</a>
                        <a href="#" class="btn btn-danger font-weight-bold btn-square">Danger</a>
                        <a href="#" class="btn btn-warning font-weight-bold btn-square">Warning</a>
                        <a href="#" class="btn btn-dark font-weight-bold btn-square">Dark</a>
                        

Custom Buttons

Metronic extends Bootstrap with custom button styles.


                        <a href="#" class="btn btn-default font-weight-bold mr-2">Default Button</a>
                        <a href="#" class="btn btn-light font-weight-bold mr-2">Light Button</a>
                        <a href="#" class="btn btn-clean font-weight-bold">Clean Button</a>
                        

Customed Buttons

Metronic Bootstrap standard unitlity classes to change button size and spacing.


                        <a href="#" class="btn btn-default font-weight-bold font-size-h5 px-8 py-3 mr-2">Button</a>
                        <a href="#" class="btn btn-danger font-weight-bold font-size-h6 px-10 py-4 mr-2">Button</a>
                        <a href="#" class="btn btn-primary font-weight-bold font-size-h3 px-12 py-5">Button</a>
                        

Mixed Buttons

Mix buttons with Metronic elements

Hi, Sean S
Hi, Sean S
Sean UX Designer
Pic

                        <div class="btn btn-icon w-auto btn-clean d-inline-flex align-items-center btn-lg px-2 mr-5">
                            <span class="text-muted font-weight-bold font-size-base mr-1">Hi,</span>
                            <span class="text-dark-50 font-weight-bolder font-size-base mr-3">Sean</span>
                            <span class="symbol symbol-35 symbol-light-warning">
                                <span class="symbol-label font-size-h5 font-weight-bold">S</span>
                            </span>
                        </div>

                        <div class="btn btn-icon btn-light w-auto btn-clean d-inline-flex align-items-center btn-lg px-2 mr-5">
                            <span class="text-muted font-weight-bold font-size-base mr-1">Hi,</span>
                            <span class="text-dark-50 font-weight-bolder font-size-base mr-3">Sean</span>
                            <span class="symbol symbol-35 symbol-light-primary">
                                <span class="symbol-label font-size-h5 font-weight-bold">S</span>
                            </span>
                        </div>

                        <div class="btn btn-light-success d-inline-flex align-items-center btn-lg mr-5">
                            <div class="d-flex flex-column text-right pr-3">
                                <span class="text-dark-75 font-weight-bold font-size-sm">Sean</span>
                                <span class="font-weight-bolder font-size-sm">UX Designer</span>
                         </div>
                            <span class="symbol symbol-40">
                                <img alt="Pic" src="media/images/users/300_25.jpg"/>
                            </span>
                        </div>
                        

Light Buttons

Use btn-light-{color}class to have a custom button style with a lighter background color and dark font color.


                        <a href="#" class="btn btn-light-success font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-light-primary font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-light-danger font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-light-warning font-weight-bold mr-2">Warning</a>
                        <a href="#" class="btn btn-light-dark font-weight-bold">Dark</a>

Light Hover Buttons

Use btn-light-{color}class to have a custom button style with a lighter background color and dark font color.


                        <a href="#" class="btn btn-text-success btn-hover-light-success font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-text-primary btn-hover-light-primary font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-text-danger btn-hover-light-danger font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-text-warning btn-hover-light-warning font-weight-bold mr-2">Warning</a>
                        <a href="#" class="btn btn-text-dark btn-hover-light-dark font-weight-bold mr-2">Dark</a>
                        

Hover Background Buttons

Use btn-light-{color}class to have a custom button style with a lighter background color and dark font color.


                        <a href="#" class="btn btn-hover-bg-success btn-text-success btn-hover-text-white border-0 font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-hover-bg-primary btn-text-primary btn-hover-text-white border-0 font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-hover-bg-danger btn-text-danger btn-hover-text-white border-0 font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-hover-bg-warning btn-text-warning btn-hover-text-white border-0 font-weight-bold mr-2">Warning</a>
                        <a href="#" class="btn btn-hover-bg-dark btn-text-dark btn-hover-text-white border-0 font-weight-bold mr-2">Dark</a>
                        

Transparent Buttons

Use btn-transparent-{color}class to have a custom button style with a transparent background color.


                        <div class="d-flex align-items-center p-4 bg-dark">
                            <a href="#" class="btn btn-transparent-success font-weight-bold mr-2">Success</a>
                            <a href="#" class="btn btn-transparent-primary font-weight-bold mr-2">Primary</a>
                            <a href="#" class="btn btn-transparent-danger font-weight-bold mr-2">Danger</a>
                            <a href="#" class="btn btn-transparent-warning font-weight-bold mr-2">Warning</a>
                            <a href="#" class="btn btn-transparent-white font-weight-bold">White</a>
                        </div>
                        

Transparent Hover Buttons

Use btn-hover-transparent-{color}class to have a custom button style with a transparent hover background color.


                        <div class="d-flex align-items-center p-4 bg-dark">
                            <a href="#" class="btn btn-hover-transparent-success font-weight-bold mr-2">Success</a>
                            <a href="#" class="btn btn-hover-transparent-primary font-weight-bold mr-2">Primary</a>
                            <a href="#" class="btn btn-hover-transparent-danger font-weight-bold mr-2">Danger</a>
                            <a href="#" class="btn btn-hover-transparent-warning font-weight-bold mr-2">Warning</a>
                            <a href="#" class="btn btn-hover-transparent-white font-weight-bold">White</a>
                        </div>
                        

Link Buttons

Use btn-link-{color}class to have a custom link button.


                        <a href="#" class="btn btn-link-success font-weight-bold">Success</a>
                        <a href="#" class="btn btn-link-primary font-weight-bold">Primary</a>
                        <a href="#" class="btn btn-link-danger font-weight-bold">Danger</a>
                        <a href="#" class="btn btn-link-warning font-weight-bold">Warning</a>
                        <a href="#" class="btn btn-link-dark font-weight-bold">Dark</a>

Button Text Colors

Use btn-text-{font-color}class to set custom color for button texts where {font-color}can be white|primary|secondary|success|info|warning|danger|light|dark|dark-75|dark-50|dark-25|muted.


                        <a href="#" class="btn btn-light btn-text-success btn-hover-text-success font-weight-bold">Success</a>
                        <a href="#" class="btn btn-light btn-text-primary btn-hover-text-primary font-weight-bold">Primary</a>
                        <a href="#" class="btn btn-light btn-text-danger btn-hover-text-danger font-weight-bold">Danger</a>
                        <a href="#" class="btn btn-light btn-text-warning btn-hover-text-dark-50 font-weight-bold">Warning</a>
                        <a href="#" class="btn btn-light btn-text-dark btn-hover-text-dark font-weight-bold">Dark</a>

Hover Button Option

Use btn-hover-{color}class to have a custom hover color for your buttons.


                        <a href="#" class="btn btn-light btn-hover-success font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-light btn-hover-primary font-weight-bold">Primary</a>
                        <a href="#" class="btn btn-light btn-hover-danger font-weight-bold">Danger</a>
                        <a href="#" class="btn btn-light btn-hover-warning font-weight-bold">Warning</a>
                        <a href="#" class="btn btn-light btn-hover-dark font-weight-bold">Dark</a> 

Buttons With Shadow

Use btn-shadowclass to set box-shadowto your buttons.


                        <a href="#" class="btn btn-light btn-shadow font-weight-bold mr-2">Light</a>
                        <a href="#" class="btn btn-success btn-shadow font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-primary btn-shadow font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-danger btn-shadow font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-warning btn-shadow font-weight-bold mr-2">Warning</a>

Use btn-shadow-hoverclass to set box-shadoweffect on hover to your buttons.


                        <a href="#" class="btn btn-light btn-shadow-hover font-weight-bold mr-2">Light</a>
                        <a href="#" class="btn btn-success btn-shadow-hover font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-primary btn-shadow-hover font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-danger btn-shadow-hover font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-warning btn-shadow-hover font-weight-bold mr-2">Warning</a>

Buttons With Icons

Use buttons with a wide range of Metronic's awesome Icon Collection.

Use btn-text-{font-color}and btn-icon-{font-color}classes to set custom color for button texts and icons where {font-color}can be white|primary|secondary|success|info|warning|danger|light|dark|dark-75|dark-50|dark-25|muted.


                        <a href="#" class="btn btn-success">
                            <i class="flaticon2-pie-chart"></i> Success
                        </a>
                        <a href="#" class="btn btn-outline-success">
                            <i class="flaticon2-poll-symbol"></i> Success
                        </a>
                        <a href="#" class="btn btn-light-success">
                            <i class="flaticon2-chat-1"></i> Success
                        </a>
                        <a href="#" class="btn btn-success">
                            <span class="svg-icon"><svg>...</svg></span> Success
                        </a>
                        <a href="#" class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3">
                            <i class="flaticon2-pie-chart"></i> Button
                        </a>
                        

Use btn-iconclass to have icon only square buttons.


                        <a href="#" class="btn btn-icon btn-success">
                            <i class="flaticon2-pie-chart"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-outline-success">
                            <i class="flaticon2-poll-symbol"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-light-success">
                            <i class="flaticon2-chat-1"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-success">
                            <span class="svg-icon"><svg>...</svg></span>
                        </a>

Social Buttons

Use buttons with social icons predefined with $social-colorsvariable in src\sass\components\_variables.bootstrap.scss.


                        <a href="#" class="btn btn-icon btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-circle btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        

Use btn-light-{social}class to have light social buttons.


                        <a href="#" class="btn btn-icon btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-circle btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>

Use btn-xs, btn-sm, btn-mdand btn-lgsize classes to set required button sizes.


                        <a href="#" class="btn btn-icon btn-xs btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-sm btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-lg btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%