Bootstrap Buttonswith a variety of options to provide unique looking buttons that matches Metronic's design standards.
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>
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).
<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"/>
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>
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>
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>
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>
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 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>
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>
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>
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>
Mix buttons with Metronic elements
<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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
