View Demo Buy Now Our Portfolio

Navigation Style

Horizontal Left-menu

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu
Left-menu Bg-Image

Leftmenu Styles Mode

Light Menu
Dark Menu
Color Menu
Gradient-Color Menu
Loader
logo
View all Notification
3
See all Messages
img
English
flag-img
French
flag-img
Germany
flag-img
Italy
flag-img
Russia
flag-img
Spain
profile-user
Jacob Fisher
My Profile Edit Profile Account Settings Inbox Message Need help? Sign out

Buttons

  1. Elements
  2. Buttons
Add Order Add User

Default Button

Use any of the available button classes to quickly create a styled button.

Default Primary Secondary Success Info Warning Danger Link 
<div class="btn-list">
	<a href="#" class="btn btn-default">Default</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-link">Link</a>
</div>

light buttons

Make buttons the light to any .btn element. <a>s don’t support the light attribute, so you must add the .light class to make it visually appear light.

Default Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-default-light">Default</a>
	<a href="#" class="btn btn-primary-light ">Primary</a>
	<a href="#" class="btn btn-secondary-light ">Secondary</a>
	<a href="#" class="btn btn-success-light ">Success</a>
	<a href="#" class="btn btn-info-light ">Info</a>
	<a href="#" class="btn btn-warning-light ">Warning</a>
	<a href="#" class="btn btn-danger-light ">Danger</a>
</div>

Disabled buttons

Make buttons the disabled to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-primary disabled">Primary</a>
	<a href="#" class="btn btn-secondary disabled">Secondary</a>
	<a href="#" class="btn btn-success disabled">Success</a>
	<a href="#" class="btn btn-info disabled">Info</a>
	<a href="#" class="btn btn-warning disabled">Warning</a>
	<a href="#" class="btn btn-danger disabled">Danger</a>
</div>

Disabled Light buttons

Make buttons the disabled to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-primary-light disabled">Primary</a>
	<a href="#" class="btn btn-secondary-light disabled">Secondary</a>
	<a href="#" class="btn btn-success-light disabled">Success</a>
	<a href="#" class="btn btn-info-light disabled">Info</a>
	<a href="#" class="btn btn-warning-light disabled">Warning</a>
	<a href="#" class="btn btn-danger-light disabled">Danger</a>
</div>

Color variations

The classic button, in different colors.

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan Gray Dark gray 
<div class="btn-list">
	<a href="#" class="btn btn-blue">Blue</a>
	<a href="#" class="btn btn-azure">Azure</a>
	<a href="#" class="btn btn-indigo">Indigo</a>
	<a href="#" class="btn btn-purple">Purple</a>
	<a href="#" class="btn btn-pink">Pink</a>
	<a href="#" class="btn btn-red">Red</a>
	<a href="#" class="btn btn-orange">Orange</a>
	<a href="#" class="btn btn-yellow">Yellow</a>
	<a href="#" class="btn btn-lime">Lime</a>
	<a href="#" class="btn btn-green">Green</a>
	<a href="#" class="btn btn-teal">Teal</a>
	<a href="#" class="btn btn-cyan">Cyan</a>
	<a href="#" class="btn btn-gray">Gray</a>
	<a href="#" class="btn btn-gray-dark">Dark gray</a>
</div>

Border buttons

The default modifier classes with the .btn-outline-*

Primary Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-outline-default">Primary</a>
	<a href="#" class="btn btn-outline-primary">Primary</a>
	<a href="#" class="btn btn-outline-secondary">Secondary</a>
	<a href="#" class="btn btn-outline-success">Success</a>
	<a href="#" class="btn btn-outline-info">Info</a>
	<a href="#" class="btn btn-outline-warning">Warning</a>
	<a href="#" class="btn btn-outline-danger">Danger</a>
</div>

Radius buttons

Add .btn-radius to button to remove border-radius.

Default Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-radius btn-default">Default</a>
	<a href="#" class="btn btn-radius btn-primary">Primary</a>
	<a href="#" class="btn btn-radius btn-secondary">Secondary</a>
	<a href="#" class="btn btn-radius btn-success">Success</a>
	<a href="#" class="btn btn-radius btn-info">Info</a>
	<a href="#" class="btn btn-radius btn-warning">Warning</a>
	<a href="#" class="btn btn-radius btn-danger">Danger</a>
</div>

Radius light buttons

Add .btn-radius to button to remove border-radius.

Default Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-radius btn-default-light">Default</a>
	<a href="#" class="btn btn-radius btn-primary-light ">Primary</a>
	<a href="#" class="btn btn-radius btn-secondary-light ">Secondary</a>
	<a href="#" class="btn btn-radius btn-success-light ">Success</a>
	<a href="#" class="btn btn-radius btn-info-light ">Info</a>
	<a href="#" class="btn btn-radius btn-warning-light ">Warning</a>
	<a href="#" class="btn btn-radius btn-danger-light ">Danger</a>
</div>

Rounded buttons

Add .btn-pill class to any button more rounded.

Default Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-pill btn-default">Default</a>
	<a href="#" class="btn btn-pill btn-primary">Primary</a>
	<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
	<a href="#" class="btn btn-pill btn-success">Success</a>
	<a href="#" class="btn btn-pill btn-info">Info</a>
	<a href="#" class="btn btn-pill btn-warning">Warning</a>
	<a href="#" class="btn btn-pill btn-danger">Danger</a>
</div>

Rounded buttons

Add .btn-pill class to any button more rounded.

Default Primary Secondary Success Info Warning Danger 
<div class="btn-list">
	<a href="#" class="btn btn-pill btn-default-light">Default</a>
	<a href="#" class="btn btn-pill btn-primary-light">Primary</a>
	<a href="#" class="btn btn-pill btn-secondary-light">Secondary</a>
	<a href="#" class="btn btn-pill btn-success-light">Success</a>
	<a href="#" class="btn btn-pill btn-info-light">Info</a>
	<a href="#" class="btn btn-pill btn-warning-light">Warning</a>
	<a href="#" class="btn btn-pill btn-danger-light">Danger</a>
</div>

Button with icon

Basic buttons are traditional buttons with borders color opitons.

<div class="btn-list">
	<button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
	<button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button>
	<button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button>
	<button type="button" class="btn btn-primary"><i class="fe fe-plus mr-2"></i>More</button>
	<button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button>
	<button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>
</div>

Button with icon animation

Basic buttons are traditional buttons with borders color opitons.

<div class="btn-list">
	<button type="button" class="btn btn-dark">Upload <i class="fa fa-upload fa-spin ml-2"></i></button>
	<button type="button" class="btn btn-warning">I like <i class="fa fa-heart fa-spin ml-2"></i></button>
	<button type="button" class="btn btn-success">I agree <i class="fa fa-check fa-spin ml-2"></i></button>
	<button type="button" class="btn btn-primary">More <i class="fa fa-plus fa-spin ml-2"></i></button>
	<button type="button" class="btn btn-danger">Link <i class="fa fa-link fa-spin ml-2"></i></button>
	<button type="button" class="btn btn-info">Comment <i class="fa fa-comment-o fa-spin ml-2"></i></button>
</div>

Button size

Add .btn-lg or .btn-sm or .btn-block for additional sizes.

<div class="btn-list">
	<div class="row">
		<div class="col-md-4 mb-2">
			<button type="button" class="btn btn-warning btn-sm mb-1">Small button</button>
		</div>
		<div class="col-md-4 mb-2">
			<button type="button" class="btn btn-info mb-1">Medium button</button>
		</div>
		<div class="col-md-4 mb-2">
			<button type="button" class="btn btn-success btn-lg mb-1">Large button</button>
		</div>
	</div>
	<button type="button" class="btn btn-primary btn-block">Block level button</button>
</div>

Social buttons

<div class="btn-list">
	<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i>Facebook</button>
	<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i>Twitter</button>
	<button type="button" class="btn btn-google"><i class="fa fa-google mr-2"></i>Google</button>
	<button type="button" class="btn btn-youtube"><i class="fa fa-youtube mr-2"></i>Youtube</button>
	<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo mr-2"></i>Vimeo</button>
	<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble mr-2"></i>Dribble</button>
	<button type="button" class="btn btn-github"><i class="fa fa-github mr-2"></i>Github</button>
	<button type="button" class="btn btn-instagram"><i class="fa fa-instagram mr-2"></i>Instagram</button>
	<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest mr-2"></i>Pinterest</button>
	<button type="button" class="btn btn-vk"><i class="fa fa-vk mr-2"></i>VKontakte</button>
	<button type="button" class="btn btn-rss"><i class="fa fa-rss mr-2"></i>RSS</button>
	<button type="button" class="btn btn-flickr"><i class="fa fa-flickr mr-2"></i>Flickr</button>
</div>

Social buttons

You can use only icons.

<div class="btn-list">
	<button type="button" class="btn btn-icon btn-facebook"><i class="fa fa-facebook"></i></button>
	<button type="button" class="btn btn-icon btn-twitter"><i class="fa fa-twitter"></i></button>
	<button type="button" class="btn btn-icon btn-google"><i class="fa fa-google"></i></button>
	<button type="button" class="btn btn-icon btn-youtube"><i class="fa fa-youtube"></i></button>
	<button type="button" class="btn btn-icon btn-vimeo"><i class="fa fa-vimeo"></i></button>
	<button type="button" class="btn btn-icon btn-dribbble"><i class="fa fa-dribbble"></i></button>
	<button type="button" class="btn btn-icon btn-github"><i class="fa fa-github"></i></button>
	<button type="button" class="btn btn-icon btn-instagram"><i class="fa fa-instagram"></i></button>
	<button type="button" class="btn btn-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>
</div>

Icon buttons

Icon only button. Add .btn-icon class to remove unnecessary button.

<div class="btn-list">
	<button type="button" class="btn btn-icon  btn-primary"><i class="fe fe-activity"></i></button>
	<button type="button" class="btn btn-icon  btn-github"><i class="fe fe-github"></i></button>
	<button type="button" class="btn btn-icon  btn-success"><i class="fe fe-bell"></i></button>
	<button type="button" class="btn btn-icon  btn-warning"><i class="fe fe-star"></i></button>
	<button type="button" class="btn btn-icon  btn-danger"><i class="fe fe-trash"></i></button>
	<button type="button" class="btn btn-icon  btn-purple"><i class="fe fe-mail"></i></button>
	<button type="button" class="btn btn-icon  btn-secondary"><i class="fe fe-git-merge"></i></button>
</div>

Loading button

Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.



<div class="btn-list">
	<button type="button" class="btn btn-primary btn-loading">Button text</button><br>
	<button type="button" class="btn btn-success btn-loading btn-icon"><i class="fe fe-check"></i></button>
	<button type="button" class="btn btn-warning btn-loading btn-sm">Button text</button><br>
	<button type="button" class="btn btn-danger btn-loading btn-lg">Button text</button>
	<button type="button" class="btn btn-info btn-loading btn-block">Button text</button>
</div>

Button dropdown

Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
<div class="btn-list">
	<div class="dropdown">
		<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
			<i class="fe fe-calendar"></i>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
			<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
		</div>
	</div>
	<div class="dropdown">
		<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
			<i class="fe fe-calendar mr-2"></i>Show calendar
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
			<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
		</div>
	</div>
	<div class="dropdown">
		<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
			Show calendar
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
			<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
		</div>
	</div>
</div>

List of buttons

You can now create a list of buttons with the .btn-list container.

Save changes Save and continue Cancel 
<div class="btn-list">
	<a href="#" class="btn btn-primary">Save changes</a>
	<a href="#" class="btn btn-secondary">Save and continue</a>
	<a href="#" class="btn btn-danger">Cancel</a>
</div>

Use the .text-center modifiers to alter the alignment.

Save changes Save and continue Cancel 
<div class="btn-list text-center">
	<a href="#" class="btn btn-primary">Save changes</a>
	<a href="#" class="btn btn-secondary">Save and continue</a>
	<a href="#" class="btn btn-danger">Cancel</a>
</div>

Use the .text-right modifiers to alter the alignment.

Save changes Save and continue Cancel 
<div class="example">
	<div class="btn-list text-right">
		<a href="#" class="btn btn-primary">Save changes</a>
		<a href="#" class="btn btn-secondary">Save and continue</a>
		<a href="#" class="btn btn-danger">Cancel</a>
	</div>
</div>
General Settings
Notifications
Show your emails
Show Task statistics
Show recent activity
System Logs
Error Reporting
Show your status to all
Keep up to date
Overview

Achieves80%

Projects60%

Earnings50%

Balance45%

Toatal Profits75%

Total Likes70%