LTR Version RTL Version

Navigation Style

Horizontal Left-menu

Skin Modes

Light Mode
Dark Mode

Skin Modes

Default Body
Body Style1

Background Patterns

Leftmenu Bg-Image

Leftmenu Styles

Leftmenu Light
Leftmenu Color
Leftmenu Dark
Leftmenu Gradient Color
Reset Leftmenu Styles
View Demo Buy Now Our Portfolio
loader
Settings
Option 1 Option 2 Option 3 Option 4 Option 5
3
Notifications
Commented on your post
3 hours ago
New file has been Uploaded
5 hour ago
User account has Updated
20 mins ago
New Order Recevied
1 hour ago
Add New View All
Vanessa Dyer
Web Developer
Profile Schedule Inbox Look Screen Log Out

Buttons

Default Button

Default Primary Secondary Success Info Warning Danger 
<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>
</div>

Disabled buttons

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

Square buttons

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

Rounded buttons

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>

Btn Outline buttons

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

Btn Outline Disabled buttons

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

App buttons

Edit Play Pause Save Notifications Users Orders Inbox Likes 
<a class="btn btn-app btn-primary ml-2 mt-1 mb-1">
	<i class="fa fa-edit"></i>Edit
</a>
<a class="btn btn-app btn-secondary ml-2 mt-1 mb-1">
	<i class="fa fa-play"></i> Play
</a>
<a class="btn btn-app btn-info ml-2 mt-1 mb-1">
	<i class="fa fa-pause"></i> Pause
</a>
<a class="btn btn-app btn-danger ml-2 mt-1 mb-1">
	<i class="fa fa-save"></i> Save
</a>
<a class="btn btn-app btn-yellow ml-2 mt-1 mb-1">
	<i class="fa fa-bullhorn"></i> Notifications
</a>
<a class="btn btn-app btn-success ml-2 mt-1 mb-1">
	<i class="fa fa-users"></i> Users
</a>
<a class="btn btn-app btn-gray ml-2 mt-1 mb-1">
	<i class="fa fa-inbox"></i> Orders
</a>
<a class="btn btn-app btn-pink ml-2 mt-1 mb-1">
	<i class="fa fa-envelope"></i> Inbox
</a>
<a class="btn btn-app btn-indigo ml-2 mt-1 mb-1">
	<i class="fa fa-heart"></i> Likes
</a>

Button with icon

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

Button with icon-loader

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

Button size

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

Color variations

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>

Social buttons

<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

<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-primary btn-github"><i class="fe fe-github"></i></button>
	<button type="button" class="btn btn-icon btn-primary btn-success"><i class="fe fe-bell"></i></button>
	<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="fe fe-star"></i></button>
	<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="fe fe-trash"></i></button>
	<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="fe fe-bar-chart"></i></button>
	<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="fe fe-git-merge"></i></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>

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>

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="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>
  • img
    01-02-2019
  • img
    01-02-2019
  • img
    01-02-2019
  • img
    02-02-2019
  • img
    02-02-2019
  • img
    03-02-2019
  • img
    03-02-2019
CH

New Websites is Created

30 mins ago

N

Prepare For the Next Project

2 hours ago

S

Decide the live Discussion Time

3 hours ago

K

Team Review meeting at yesterday at 3:00 pm

4 hours ago

R

Prepare for Presentation

1 days ago

MS

Prepare for Presentation

1 days ago

L

Prepare for Presentation

45 mintues ago

U

Prepare for Presentation

2 days ago

Upgrade more
Copyright © 2019 IndoUi. Designed by Spruko All rights reserved.