itsm-pc-handle/assets/views/ui_buttons.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.element.BUTTONS">{{ mainTitle }}</h1>
			<span class="mainDescription">Button design is usually a subtle element to a web design, but it can have a significant impact on the overall look and usability of the site. </span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: DEFAULT BUTOONS -->
<div class="container-fluid container-fullw bg-white">
	<div class="row buttons-widget">
		<div class="col-md-12 margin-bottom-30">
			<h5 class="over-title">Default <span class="text-bold">Buttons</span></h5>
			<p>
				Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
			</p>
			<!-- Standard grey button with gradient -->
			<button type="button" class="btn btn-wide btn-default">
				Default
			</button>
			<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
			<button type="button" class="btn btn-wide btn-primary">
				Primary
			</button>
			<!-- Indicates a successful or positive action -->
			<button type="button" class="btn btn-wide btn-success">
				Success
			</button>
			<!-- Contextual button for informational alert messages -->
			<button type="button" class="btn btn-wide btn-info">
				Info
			</button>
			<!-- Indicates caution should be taken with this action -->
			<button type="button" class="btn btn-wide btn-warning">
				Warning
			</button>
			<!-- Indicates a dangerous or potentially negative action -->
			<button type="button" class="btn btn-wide btn-danger">
				Danger
			</button>
		</div>
		<div class="col-md-12">
			<h5 class="over-title">Outlined <span class="text-bold">Buttons</span></h5>
			<p>
				Use the <code>.btn-o</code> class for outlined buttons.
			</p>
			<button type="button" class="btn btn-o btn-wide btn-default">
				Default
			</button>
			<button type="button" class="btn btn-wide btn-o btn-primary">
				Primary
			</button>
			<button type="button" class="btn btn-wide btn-o btn-success">
				Success
			</button>
			<button type="button" class="btn btn-wide btn-o btn-info">
				Info
			</button>
			<button type="button" class="btn btn-wide btn-o btn-warning">
				Warning
			</button>
			<button type="button" class="btn btn-wide  btn-o btn-danger">
				Danger
			</button>
		</div>
	</div>
</div>
<!-- end: DEFAULT BUTOONS -->
<!-- start: COLORFUL BUTOONS -->
<div class="container-fluid container-fullw">
	<div class="row buttons-widget">
		<div class="col-md-12">
			<h5 class="over-title">Colorful <span class="text-bold">Buttons</span></h5>
			<p>
				Use any of the available button classes to quickly create a styled button.
			</p>
			<p class="text-small">
				Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies &ndash; such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.
			</p>
			<div class="row">
				<div class="col-sm-4">
					<h5 class="margin-top-30">Azure Button</h5>
					<p class="text-small">
						Add class <code>.btn-azure</code>, <code>.btn-light-azure</code> or <code>.btn-dark-azure</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-azure">
						Azure
					</button>
					<button type="button" class="btn btn-wide btn-light-azure">
						Light Azure
					</button>
					<button type="button" class="btn btn-wide btn-dark-azure">
						Dark Azure
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Blue Button</h5>
					<p class="text-small">
						Add class <code>.btn-blue</code>, <code>.btn-light-blue</code> or <code>.btn-dark-blue</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-blue">
						Blue
					</button>
					<button type="button" class="btn btn-wide btn-light-blue">
						Light Blue
					</button>
					<button type="button" class="btn btn-wide btn-dark-blue">
						Dark Blue
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Purple Button</h5>
					<p class="text-small">
						Add class <code>.btn-purple</code>, <code>.btn-light-purple</code> or <code>.btn-dark-purple</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-purple">
						Purple
					</button>
					<button type="button" class="btn btn-wide btn-light-purple">
						Light Purple
					</button>
					<button type="button" class="btn btn-wide btn-dark-purple">
						Dark Purple
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Red Button</h5>
					<p class="text-small">
						Add class <code>.btn-red</code>, <code>.btn-light-red</code> or <code>.btn-dark-red</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-red">
						Red
					</button>
					<button type="button" class="btn btn-wide btn-light-red">
						Light Red
					</button>
					<button type="button" class="btn btn-wide btn-dark-red">
						Dark Red
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Orange Button</h5>
					<p class="text-small">
						Add class <code>.btn-orange</code>, <code>.btn-light-orange</code> or <code>.btn-dark-orange</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-orange">
						Orange
					</button>
					<button type="button" class="btn btn-wide btn-light-orange">
						Light Orange
					</button>
					<button type="button" class="btn btn-wide btn-dark-orange">
						Dark Orange
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Yellow Button</h5>
					<p class="text-small">
						Add class <code>.btn-yellow</code>, <code>.btn-light-yellow</code> or <code>.btn-dark-yellow</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-yellow">
						Yellow
					</button>
					<button type="button" class="btn btn-wide btn-light-yellow">
						Light Yellow
					</button>
					<button type="button" class="btn btn-wide btn-dark-yellow">
						Dark Yellow
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Green Button</h5>
					<p class="text-small">
						Add class <code>.btn-green</code>, <code>.btn-light-green</code> or <code>.btn-dark-green</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-green">
						Green
					</button>
					<button type="button" class="btn btn-wide btn-light-green">
						Light Green
					</button>
					<button type="button" class="btn btn-wide btn-dark-green">
						Dark Green
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Beige Button</h5>
					<p class="text-small">
						Add class <code>.btn-beige</code>, <code>.btn-light-beige</code> or <code>.btn-dark-beige</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-beige">
						Beige
					</button>
					<button type="button" class="btn btn-wide btn-light-beige">
						Light Beige
					</button>
					<button type="button" class="btn btn-wide btn-dark-beige">
						Dark Beige
					</button>
				</div>
				<div class="col-sm-4">
					<h5 class="margin-top-30">Grey Button</h5>
					<p class="text-small">
						Add class <code>.btn-grey</code>, <code>.btn-light-grey</code> or <code>.btn-dark-grey</code> to your button.
					</p>
					<button type="button" class="btn btn-wide btn-grey">
						Grey
					</button>
					<button type="button" class="btn btn-wide btn-light-grey">
						Light Grey
					</button>
					<button type="button" class="btn btn-wide btn-dark-grey">
						Dark Grey
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: COLORFUL BUTOONS -->
<!-- start: BUTTON OPTIONS -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold">Options</span></h5>
			<p>
				You can change the style and the state of the buttons using minimal markup.
			</p>
			<div class="row buttons-widget">
				<div class="col-sm-6">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Square Buttons
							</div>
						</div>
						<div class="panel-body">
							<p>
								Do you like the square buttons? Add <code> .btn-squared </code>
								to change its shape.
							</p>
							<button type="button" class="btn btn-wide btn-default btn-squared">
								Squared
							</button>
							<button type="button" class="btn btn-wide btn-primary btn-squared btn-o">
								Squared
							</button>
							<button type="button" class="btn btn-wide btn-info btn-squared">
								Squared
							</button>
							<button type="button" class="btn btn-wide btn-success btn-squared">
								Squared <i class="fa fa-angle-right"></i>
							</button>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Sizes
							</div>
						</div>
						<div class="panel-body">
							<p>
								Fancy larger or smaller buttons? Add <code> .btn-lg </code>
								, <code> .btn-sm </code>
								, or <code> .btn-xs </code>
								for additional sizes.
							</p>
							<p>
								<button type="button" class="btn btn-primary btn-lg">
									Large button
								</button>
							</p>
							<p>
								<button type="button" class="btn btn-primary">
									Default button
								</button>
							</p>
							<p>
								<button type="button" class="btn btn-primary btn-sm">
									Small button
								</button>
							</p>
							<p>
								<button type="button" class="btn btn-primary btn-xs">
									Extra small
								</button>
							</p>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Disabled State
							</div>
						</div>
						<div class="panel-body">
							<p>
								Add the <code> disabled </code>
								attribute to <code> &lt;button&gt; </code>
								buttons.
							</p>
							<button type="button" class="btn btn-wide btn-primary" disabled="disabled">
								Disabled
							</button>
							<button type="button" class="btn btn-wide btn-azure" disabled="disabled">
								Disabled
							</button>
							<button type="button" class="btn btn-wide btn-red" disabled="disabled">
								Disabled
							</button>
							<button type="button" class="btn btn-wide btn-green" disabled="disabled">
								Disabled
							</button>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Active State
							</div>
						</div>
						<div class="panel-body">
							<p>
								if you need to force the <code>:active</code> appearance, add <code>.active</code>.
							</p>
							<button type="button" class="btn btn-wide btn-primary active">
								Active
							</button>
							<button type="button" class="btn btn-wide btn-azure active">
								Active
							</button>
							<button type="button" class="btn btn-wide btn-red active">
								Active
							</button>
							<button type="button" class="btn btn-wide btn-green active">
								Active
							</button>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Block level buttons
							</div>
						</div>
						<div class="panel-body">
							<p>
								Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code> .btn-block </code>
								.
							</p>
							<p>
								<button class="btn btn-primary btn-block">
									Block level button
								</button>
							</p>
							<p>
								<div class="btn-group btn-group-justified">
									<a class="btn btn-dark-red" href="javascript:;">
										Tools
									</a>
									<a class="btn btn-dark-green" href="javascript:;">
										Help
									</a>
									<a class="btn btn-dark-blue" href="javascript:;">
										Contact
									</a>
								</div>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: BUTTON OPTIONS -->
<!-- start: BUTTON GROUPS -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Button <span class="text-bold">Groups</span></h5>
			<p>
				Group a series of buttons together on a single line with the button group.
			</p>
			<div class="row">
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Basic example
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								Wrap a series of buttons with <code> .btn </code>
								in <code> .btn-group </code>
								.
							</p>
							<div class="space12">
								<div class="btn-group">
									<a class="btn btn-primary btn-o active" href="javascript:;">
										Tools
									</a>
									<a class="btn btn-primary btn-o hidden-xs" href="javascript:;">
										Settings
									</a>
									<a class="btn btn-primary btn-o" href="javascript:;">
										Help
									</a>
									<a class="btn btn-primary btn-o" href="javascript:;">
										Contact
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Button toolbar
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.
							</p>
							<div class="space12">
								<div class="btn-toolbar">
									<div aria-label="First group" role="group" class="btn-group">
										<button class="btn btn-primary" type="button">
											1
										</button>
										<button class="btn btn-primary" type="button">
											2
										</button>
										<button class="btn btn-primary" type="button">
											3
										</button>
										<button class="btn btn-primary" type="button">
											4
										</button>
									</div>
									<div class="btn-group">
										<button class="btn btn-primary" type="button">
											5
										</button>
										<button class="btn btn-primary" type="button">
											6
										</button>
										<button class="btn btn-primary" type="button">
											7
										</button>
									</div>
									<div class="btn-group">
										<button class="btn btn-primary" type="button">
											8
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Vertical variation
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								Make a set of buttons appear vertically stacked rather than horizontally
							</p>
							<div class="space12">
								<div class="btn-group-vertical">
									<a class="btn btn-wide btn-orange" href="javascript:;">
										Tools
									</a>
									<a class="btn btn-wide btn-orange active" href="javascript:;">
										Settings
									</a>
									<a class="btn btn-wide btn-orange" href="javascript:;">
										Help
									</a>
									<a class="btn btn-wide btn-orange" href="javascript:;">
										Contact
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: BUTTON GROUPS -->
<!-- start: DROPDOWN BUTTONS -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Dropdown <span class="text-bold">Buttons</span></h5>
			<p>
				Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
				You can either use <code>is-open</code> to toggle or add inside a <code>&lt;a dropdown-toggle&gt;</code> element to toggle it when is clicked.
				There is also the <code>on-toggle(open)</code> optional expression fired when dropdown changes state.
			</p>
			<!-- /// controller:  'DropdownCtrl' -  localtion: assets/js/controllers/bootstrapCtrl.js /// -->
			<div ng-controller="DropdownCtrl">
				<!-- Simple dropdown -->
				<span class="dropdown" dropdown on-toggle="toggled(open)">
					<p>
						<a href class="dropdown-toggle" dropdown-toggle>
							Click me for a dropdown, yo!
						</a>
					</p>
					<ul class="dropdown-menu">
						<li ng-repeat="choice in items">
							<a href>
								{{choice}}
							</a>
						</li>
					</ul> </span>
				<!-- Single button -->
				<div class="btn-group" dropdown is-open="status.isopen">
					<button type="button" class="btn btn-wide btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
						Button dropdown <span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li>
							<a href="#">
								Action
							</a>
						</li>
						<li>
							<a href="#">
								Another action
							</a>
						</li>
						<li>
							<a href="#">
								Something else here
							</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#">
								Separated link
							</a>
						</li>
					</ul>
				</div>
				<!-- Split button -->
				<div class="btn-group" dropdown>
					<button type="button" class="btn btn-danger">
						Action
					</button>
					<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
						<span class="caret"></span>
						<span class="sr-only">Split button!</span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li>
							<a href="#">
								Action
							</a>
						</li>
						<li>
							<a href="#">
								Another action
							</a>
						</li>
						<li>
							<a href="#">
								Something else here
							</a>
						</li>
						<li class="divider"></li>
						<li>
							<a href="#">
								Separated link
							</a>
						</li>
					</ul>
				</div>
				<hr />
				<p>
					<button type="button" class="btn btn-wide btn-default btn-sm" ng-click="toggleDropdown($event)">
						Toggle button dropdown
					</button>
					<button type="button" class="btn btn-wide btn-warning btn-sm" ng-click="disabled = !disabled">
						Enable/Disable
					</button>
				</p>
			</div>
		</div>
	</div>
</div>
<!-- end: DROPDOWN BUTTONS -->
<!-- start: LOADING INDICATOR -->
<div class="container-fluid container-fullw">
	<div class="row buttons-widget">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Buttons with <span class="text-bold">loading indicator</span></h5>
			<p>
				An angular directive wrapper for Ladda, a UI concept which merges loading indicators into the action that invoked them. <span class="text-bold">Click the buttons to see the effect.</span>
			</p>
			<div class="row">
				<!-- /// controller:  'LaddaCtrl' -  localtion: assets/js/controllers/laddaCtrl.js /// -->
				<div ng-controller="LaddaCtrl">
					<div class="col-sm-6">
						<h5> Expand </h5>
						<p>
							<a ladda="ldloading.expand_left" class="btn btn-wide btn-primary" data-style="expand-left" ng-click="clickBtn('expand-left')">
								expand-left
							</a>
							<a ladda="ldloading.expand_right" class="btn btn-wide btn-primary" data-style="expand-right" ng-click="clickBtn('expand-right')">
								expand-right
							</a>
							<a ladda="ldloading.expand_up" class="btn btn-wide btn-primary" data-style="expand-up" ng-click="clickBtn('expand-up')">
								expand-up
							</a>
							<a ladda="ldloading.expand_down" class="btn btn-wide btn-primary" data-style="expand-down" ng-click="clickBtn('expand-down')">
								expand-down
							</a>
						</p>
						<h5> Zoom </h5>
						<p>
							<a ladda="ldloading.contract" class="btn btn-wide btn-warning" data-style="contract" ng-click="clickBtn('contract')">
								contract
							</a>
							<a ladda="ldloading.zoom_in" class="btn btn-wide btn-warning" data-style="zoom-in" ng-click="clickBtn('zoom-in')">
								zoom-in
							</a>
							<a ladda="ldloading.zoom_out" class="btn btn-wide btn-warning" data-style="zoom-out" ng-click="clickBtn('zoom-out')">
								zoom-out
							</a>
						</p>
						<h5> Slide </h5>
						<p>
							<a ladda="ldloading.slide_left" class="btn btn-wide btn-danger" data-style="slide-left" ng-click="clickBtn('slide-left')">
								slide-left
							</a>
							<a ladda="ldloading.slide_right" class="btn btn-wide btn-danger" data-style="slide-right" ng-click="clickBtn('slide-right')">
								slide-right
							</a>
							<a ladda="ldloading.slide_up" class="btn btn-wide btn-danger" data-style="slide-up" ng-click="clickBtn('slide-up')">
								slide-up
							</a>
							<a ladda="ldloading.slide_down" class="btn btn-wide btn-danger" data-style="slide-down" ng-click="clickBtn('slide-down')">
								slide-down
							</a>
						</p>
					</div>
					<div class="col-sm-6">
						<h5> Built-in progress bar </h5>
						<p class="progress-demo">
							<a ladda="ldloading.expand_right_progress" class="btn btn-primary" data-style="expand-right" ng-click="clickProgressBtn('expand-right')">
								expand-right
							</a>
							<a ladda="ldloading.contract_progress" class="btn btn-wide btn-primary" data-style="contract" ng-click="clickProgressBtn('contract')">
								contract
							</a>
						</p>
						<h5> Sizes </h5>
						<p class="progress-demo">
							<a ladda="ldloading.xs" class="btn btn-wide btn-lg btn-info" data-style="expand-right" data-spinner-size="10" ng-click="clickBtn('xs')">
								10
							</a>
							<a ladda="ldloading.sm" class="btn btn-wide btn-lg btn-info" data-style="expand-right" data-spinner-size="20" ng-click="clickBtn('sm')">
								20
							</a>
							<a ladda="ldloading.lg" class="btn btn-wide btn-lg btn-info" data-style="expand-right" data-spinner-size="30" ng-click="clickBtn('lg')">
								30
							</a>
						</p>
						<h5> Colors </h5>
						<p class="progress-demo">
							<a ladda="ldloading.red" class="btn btn-wide btn-default" data-style="expand-right" data-spinner-color="#ff0000" ng-click="clickBtn('red')">
								red
							</a>
							<a ladda="ldloading.gray" class="btn btn-wide btn-default" data-style="expand-right" data-spinner-color="#999999" ng-click="clickBtn('gray')">
								gray
							</a>
							<a ladda="ldloading.black" class="btn btn-wide btn-default" data-style="expand-right" data-spinner-color="#000000" ng-click="clickBtn('black')">
								black
							</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: LOADING INDICATOR -->
<!-- start: BUTTONS WITH ICONS -->
<div class="container-fluid container-fullw bg-white">
	<div class="row buttons-widget">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Buttons with <span class="text-bold">icons</span></h5>
			<p>
				A lightweight, extensible directive for add small overlays of content, like those on the iPad, to any element for housing secondary information..
			</p>
			<div class="row">
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Font Awesome
							</div>
						</div>
						<div class="panel-body">
							<p class="text-small">
								Examples to use buttons with font awesome icons.
							</p>
							<p>
								<a class="btn btn-wide btn-primary" href="#"><i class="fa fa-share"></i></a>
								<a class="btn btn-wide btn-red" href="#"><i class="fa fa-times fa fa-white"></i></a>
								<a class="btn btn-wide btn-blue" href="#"><i class="fa fa-arrow-circle-right"></i></a>
								<a class="btn btn-wide btn-green" href="#"><i class="fa fa-user fa fa-white"></i></a>
							</p>
							<p class="text-small">
								Buttons with both text and font awesome icon.
							</p>
							<p>
								<a class="btn btn-wide btn-red" href="#"><i class="fa fa-trash-o"></i> Delete Item</a>
								<a class="btn btn-wide btn-primary" href="#"><i class="fa fa-plus"></i> Add Item</a>
								<a class="btn btn-wide btn-purple">
									Listen <i class="fa fa-headphones"></i>
								</a>
								<a class="btn btn-wide btn-blue" href="#"><i class="fa fa-plus"></i> Submit Entry</a>
							</p>
							<p>
								Toolbar made with font awesome icons.
							</p>
							<div class="space12">
								<div class="btn-group">
									<button class="btn btn-primary">
										<i class="fa fa-step-backward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="fa fa-backward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="fa fa-play"></i>
									</button>
									<button class="btn btn-primary">
										<i class="fa fa-stop"></i>
									</button>
									<button class="btn btn-primary">
										<i class="fa fa-forward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="fa fa-step-forward"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Glyphicons
							</div>
						</div>
						<div class="panel-body">
							<p>
								Examples to use buttons with glyphicon icons.
							</p>
							<p>
								<a class="btn btn-wide btn-primary" href="#"><i class="glyphicon glyphicon-share"></i></a>
								<a class="btn btn-wide btn-red" href="#"><i class="glyphicon glyphicon-remove-circle"></i></a>
								<a class="btn btn-wide btn-blue" href="#"><i class="glyphicon glyphicon-circle-arrow-right"></i></a>
								<a class="btn btn-wide btn-green" href="#"><i class="glyphicon glyphicon-user"></i></a>
							</p>
							<p class="text-small">
								Buttons with both text and glyphicon icon.
							</p>
							<p>
								<a class="btn btn-wide btn-red" href="#"><i class="glyphicon glyphicon-trash"></i> Delete Item</a>
								<a class="btn btn-wide btn-primary" href="#"><i class="glyphicon glyphicon-plus"></i> Add Item</a>
								<a class="btn btn-wide btn-purple">
									Listen <i class="glyphicon glyphicon-headphones"></i>
								</a>
								<a class="btn btn-wide btn-blue" href="#"><i class="glyphicon glyphicon-plus"></i> Submit Entry</a>
							</p>
							<p>
								Toolbar made with glyphicon icons.
							</p>
							<div class="space12">
								<div class="btn-group">
									<button class="btn btn-primary">
										<i class="glyphicon glyphicon-step-backward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="glyphicon glyphicon-backward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="glyphicon glyphicon-play"></i>
									</button>
									<button class="btn btn-primary">
										<i class="glyphicon glyphicon-stop"></i>
									</button>
									<button class="btn btn-primary">
										<i class="glyphicon glyphicon-forward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="glyphicon glyphicon-step-forward"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Themify Icons
							</div>
						</div>
						<div class="panel-body">
							<p>
								Examples to use buttons with themify icons.
							</p>
							<p>
								<a class="btn btn-wide btn-primary" href="#"><i class="ti-share"></i></a>
								<a class="btn btn-wide btn-red" href="#"><i class="ti-close"></i></a>
								<a class="btn btn-wide btn-blue" href="#"><i class="ti-arrow-circle-right"></i></a>
								<a class="btn btn-wide btn-green" href="#"><i class="ti-user"></i></a>
							</p>
							<p class="text-small">
								Buttons with both text and themify icon.
							</p>
							<p>
								<a class="btn btn-wide btn-red" href="#"><i class="ti-trash"></i> Delete Item</a>
								<a class="btn btn-wide btn-primary" href="#"><i class="ti-plus"></i> Add Item</a>
								<a class="btn btn-wide btn-purple">
									Listen <i class="ti-headphone"></i>
								</a>
								<a class="btn btn-wide btn-blue" href="#"><i class="ti-plus"></i> Submit Entry</a>
							</p>
							<p>
								Toolbar made with themify icons.
							</p>
							<div class="space12">
								<div class="btn-group">
									<button class="btn btn-primary">
										<i class="ti-control-skip-backward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="ti-control-backward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="ti-control-play"></i>
									</button>
									<button class="btn btn-primary">
										<i class="ti-control-stop"></i>
									</button>
									<button class="btn btn-primary">
										<i class="ti-control-forward"></i>
									</button>
									<button class="btn btn-primary">
										<i class="ti-control-skip-forward"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Animated Buttons
							</div>
						</div>
						<div class="panel-body">
							<p>
								Modern and subtle styles &amp; effects for buttons
							</p>
							<button type="button" class="btn btn-primary btn-wide btn-scroll btn-scroll-top ti-shopping-cart" ng-click="openAside('right')">
								<span>Add to cart</span>
							</button>
							<button type="button" class="btn btn-success btn-wide btn-scroll btn-scroll-left ti-settings" ng-click="openAside('right')">
								<span>Settings</span>
							</button>
							<button type="button" class="btn btn-info btn-wide btn-scroll btn-scroll-top fa fa-heart" ng-click="openAside('right')">
								<span>Love</span>
							</button>
							<button type="button" class="btn btn-danger btn-wide btn-scroll btn-scroll-left fa fa-truck" ng-click="openAside('right')">
								<span>Truck</span>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<div class="panel-title">
								Social List
							</div>
						</div>
						<div class="panel-body">
							<div class="social-icons">
								<ul>
									<li class="social-twitter" tooltip="Twitter" tooltip-placement="top">
										<a target="_blank" href="#">
											Twitter
										</a>
									</li>
									<li class="social-dribbble" tooltip="Dribbble" tooltip-placement="top">
										<a target="_blank" href="#">
											Dribbble
										</a>
									</li>
									<li class="social-facebook" tooltip="Facebook" tooltip-placement="top">
										<a target="_blank" href="#">
											Facebook
										</a>
									</li>
									<li class="social-google" tooltip="Google" tooltip-placement="top">
										<a target="_blank" href="#">
											Google+
										</a>
									</li>
									<li class="social-linkedin" tooltip="LinkedIn" tooltip-placement="top">
										<a target="_blank" href="#">
											LinkedIn
										</a>
									</li>
									<li class="social-youtube" tooltip="YouTube" tooltip-placement="top">
										<a target="_blank" href="#">
											YouTube
										</a>
									</li>
									<li class="social-rss" tooltip="RSS" tooltip-placement="top">
										<a target="_blank" href="#" >
											RSS
										</a>
									</li>
									<li class="social-behance" tooltip="Behance" tooltip-placement="top">
										<a target="_blank" href="#" >
											Behance
										</a>
									</li>
									<li class="social-dropbox" tooltip="Dropbox" tooltip-placement="top">
										<a target="_blank" href="#" >
											Dropbox
										</a>
									</li>
									<li class="social-github" tooltip="Github" tooltip-placement="top">
										<a target="_blank" href="#" >
											Github
										</a>
									</li>
									<li class="social-spotify" tooltip="Spotify" tooltip-placement="top">
										<a target="_blank" href="#" >
											Spotify
										</a>
									</li>
									<li class="social-stumbleupon" tooltip="Stumbleupon" tooltip-placement="top">
										<a target="_blank" href="#" >
											Stumbleupon
										</a>
									</li>
									<li class="social-skype" tooltip="Skype" tooltip-placement="top">
										<a target="_blank" href="#" >
											Skype
										</a>
									</li>
									<li class="social-tumblr" tooltip="Tumblr" tooltip-placement="top">
										<a target="_blank" href="#" >
											Tumblr
										</a>
									</li>
									<li class="social-spotify" tooltip="Spotify" tooltip-placement="top">
										<a target="_blank" href="#" >
											Spotify
										</a>
									</li>
									<li class="social-vimeo" tooltip="Vimeo" tooltip-placement="top">
										<a target="_blank" href="#" >
											Vimeo
										</a>
									</li>
									<li class="social-wordpress" tooltip="Wordpress" tooltip-placement="top">
										<a target="_blank" href="#" >
											Wordpress
										</a>
									</li>
									<li class="social-xing" tooltip="Xing" tooltip-placement="top">
										<a target="_blank" href="#" >
											Xing
										</a>
									</li>
									<li class="social-yahoo" tooltip="Yahoo" tooltip-placement="top">
										<a target="_blank" href="#" >
											Yahoo
										</a>
									</li>
									<li class="social-vk" tooltip="VK" tooltip-placement="top">
										<a target="_blank" href="#" >
											VK
										</a>
									</li>
									<li class="social-instagram" tooltip="Instagram" tooltip-placement="top">
										<a target="_blank" href="#" >
											Instagram
										</a>
									</li>
									<li class="social-reddit" tooltip="Reddit" tooltip-placement="top">
										<a target="_blank" href="#" >
											Reddit
										</a>
									</li>
									<li class="social-flickr" tooltip="Flickr" tooltip-placement="top">
										<a target="_blank" href="#" >
											Flickr
										</a>
									</li>
									<li class="social-foursquare" tooltip="Foursquare" tooltip-placement="top">
										<a target="_blank" href="#" >
											Foursquare
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: BUTTONS WITH ICONS -->