<!DOCTYPE html>
<html lang="en">
<head>
@@include("partials/title-meta.html", {"title": "Buttons"})
@@include("partials/head-css.html")
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
@@include('./partials/topbar.html', {"pagetitle": "Buttons"})
@@include('./partials/left-sidebar.html')
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Start Content-->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Default Buttons</h4>
<p class="text-muted font-13">Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
<div class="button-list">
<button type="button" class="btn btn-primary waves-effect width-md waves-light">Primary</button>
<button type="button" class="btn btn-secondary waves-effect width-md">Secondary</button>
<button type="button" class="btn btn-success waves-effect width-md waves-light">Success</button>
<button type="button" class="btn btn-info waves-effect width-md waves-light">Info</button>
<button type="button" class="btn btn-warning waves-effect width-md waves-light">Warning</button>
<button type="button" class="btn btn-danger waves-effect width-md waves-light">Danger</button>
<button type="button" class="btn btn-dark waves-effect width-md waves-light">Dark</button>
<button type="button" class="btn btn-purple waves-effect width-md waves-light">Purple</button>
<button type="button" class="btn btn-pink waves-effect width-md waves-light">Pink</button>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Button Rounded</h4>
<p class="text-muted font-13">Add <code>.btn-rounded</code> to default button to get rounded corners.</p>
<div class="button-list">
<button type="button" class="btn btn-primary btn-rounded width-md waves-effect waves-light">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded width-md waves-effect">Secondary</button>
<button type="button" class="btn btn-success btn-rounded width-md waves-effect waves-light">Success</button>
<button type="button" class="btn btn-info btn-rounded width-md waves-effect waves-light">Info</button>
<button type="button" class="btn btn-warning btn-rounded width-md waves-effect waves-light">Warning</button>
<button type="button" class="btn btn-danger btn-rounded width-md waves-effect waves-light">Danger</button>
<button type="button" class="btn btn-dark btn-rounded width-md waves-effect waves-light">Dark</button>
<button type="button" class="btn btn-purple btn-rounded width-md waves-effect waves-light">Purple</button>
<button type="button" class="btn btn-pink btn-rounded width-md waves-effect waves-light">Pink</button>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Button Bordered</h4>
<p class="text-muted font-13">Use a classes <code>.btn-bordered</code> to quickly create a bordered buttons.</p>
<div class="button-list">
<button type="button" class="btn btn-bordered-primary waves-effect width-md waves-light">Primary</button>
<button type="button" class="btn btn-bordered-secondary waves-effect width-md">Secondary</button>
<button type="button" class="btn btn-bordered-success waves-effect width-md waves-light">Success</button>
<button type="button" class="btn btn-bordered-info waves-effect width-md waves-light">Info</button>
<button type="button" class="btn btn-bordered-warning waves-effect width-md waves-light">Warning</button>
<button type="button" class="btn btn-bordered-danger waves-effect width-md waves-light">Danger</button>
<button type="button" class="btn btn-bordered-dark waves-effect width-md waves-light">Dark</button>
<button type="button" class="btn btn-bordered-purple waves-effect width-md waves-light">Purple</button>
<button type="button" class="btn btn-bordered-pink waves-effect width-md waves-light">Pink</button>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Button Lighten</h4>
<p class="text-muted font-13">Use a classes <code>.btn-lighten-</code> to quickly create a bordered buttons.</p>
<div class="button-list">
<button type="button" class="btn btn-lighten-primary waves-effect waves-primary width-md">Primary</button>
<button type="button" class="btn btn-lighten-secondary waves-effect width-md">Secondary</button>
<button type="button" class="btn btn-lighten-success waves-effect width-md waves-success">Success</button>
<button type="button" class="btn btn-lighten-info waves-effect width-md waves-info">Info</button>
<button type="button" class="btn btn-lighten-warning waves-effect width-md waves-warning">Warning</button>
<button type="button" class="btn btn-lighten-danger waves-effect width-md waves-danger">Danger</button>
<button type="button" class="btn btn-lighten-dark waves-effect width-md waves-inverse">Dark</button>
<button type="button" class="btn btn-lighten-purple waves-effect width-md waves-purple">Purple</button>
<button type="button" class="btn btn-lighten-pink waves-effect width-md waves-pink">Pink</button>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-md-4">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Button Width</h4>
<p class="text-muted font-13">
Create buttons with minimum width by adding add <code>.width-xs</code>, <code>.width-sm</code>, <code>.width-md</code> or <code>.width-lg</code>.
</p>
<div class="button-list">
<button type="button" class="btn btn-primary waves-effect waves-light width-xs">Xs</button>
<button type="button" class="btn btn-purple waves-effect waves-light width-sm">Small</button>
<button type="button" class="btn btn-info waves-effect waves-light width-md">Middle</button>
<button type="button" class="btn btn-warning waves-effect waves-light width-lg">Large</button>
</div>
</div>
</div><!-- end col -->
<div class="col-md-4">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Button-Sizes</h4>
<p class="text-muted font-13">
Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.
</p>
<div class="button-list">
<button class="btn btn-primary waves-effect waves-light btn-lg">Large button</button>
<button class="btn btn-danger waves-effect waves-light">Normal button</button>
<button class="btn btn-success waves-effect waves-light btn-sm">Small button</button>
</div>
</div>
</div><!-- end col -->
<div class="col-md-4">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0 m-b-30">Button-Disabled</h4>
<p class="text-muted font-13">
Add the <code>disabled</code> attribute to <code><button></code> buttons.
</p>
<div class="button-list">
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-purple disabled">Purple</button>
<button type="button" class="btn btn-pink disabled">Pink</button>
<button type="button" class="btn btn-dark disabled">Dark</button>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-md-6">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Icon Button</h4>
<p class="text-muted font-13">
Icon only button.
</p>
<div class="button-list">
<button class="btn btn-icon waves-effect btn-secondary"> <i class="far fa-heart"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-danger"> <i class="fas fa-times"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-purple"> <i class="fa fa-music"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-primary"> <i class="fa fa-star"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-success"> <i class="far fa-thumbs-up"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-info"> <i class="far fa-keyboard"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-warning"> <i class="fa fa-wrench"></i> </button>
<br>
<button class="btn btn-secondary waves-effect"> <i class="fa fa-heart mr-1"></i> <span>Like</span> </button>
<button class="btn btn-dark waves-effect waves-light"> <i class="far fa-envelope mr-1"></i> <span>Share</span> </button>
<button class="btn btn-warning waves-effect waves-light"> <i class="fa fa-rocket mr-1"></i> <span>Launch</span> </button>
<button class="btn btn-info waves-effect waves-light"> <i class="fa fa-cloud mr-1"></i> <span>Cloud Hosting</span> </button>
<button class="btn btn-pink waves-effect waves-light"> <span>Book Flight</span> <i class="fa fa-plane ml-1"></i> </button>
<button class="btn btn-purple waves-effect waves-light"> <span>Donate Money</span> <i class="far fa-money-bill-alt ml-1"></i> </button>
</div>
</div>
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Block Button</h4>
<p class="text-muted font-13">
Create block level buttons,with by adding add <code>.btn-block</code>.
</p>
<button type="button" class="btn btn-block btn--md btn-pink waves-effect waves-light">Block Button</button>
<button type="button" class="btn btn-block btn-sm btn-success waves-effect waves-light">Block Button</button>
<button type="button" class="btn btn-block btn-xs btn-purple waves-effect waves-light">Block Button</button>
</div>
</div>
<!-- end col -->
<div class="col-md-6">
<div class="card-box">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Separated link</a>
</div>
</div>
<h4 class="header-title mt-0">Button Group</h4>
<p class="text-muted font-13">
Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.
</p>
<div class="btn-group mb-1">
<button type="button" class="btn btn-secondary waves-effect">Left</button>
<button type="button" class="btn btn-secondary waves-effect">Middle</button>
<button type="button" class="btn btn-secondary waves-effect">Right</button>
</div>
<br>
<div class="btn-group mb-1">
<button type="button" class="btn btn-secondary waves-effect">1</button>
<button type="button" class="btn btn-secondary waves-effect">2</button>
<button type="button" class="btn btn-dark waves-effect waves-light">3</button>
<button type="button" class="btn btn-secondary waves-effect">4</button>
</div>
<div class="btn-group mb-1">
<button type="button" class="btn btn-secondary waves-effect">5</button>
<button type="button" class="btn btn-dark waves-effect waves-light">6</button>
<button type="button" class="btn btn-secondary waves-effect">7</button>
</div>
<div class="btn-group mb-1">
<button type="button" class="btn btn-secondary waves-effect">8</button>
</div>
<br>
<div class="btn-group mb-1">
<button type="button" class="btn btn-secondary waves-effect">1</button>
<button type="button" class="btn btn-primary waves-effect waves-light">2</button>
<button type="button" class="btn btn-secondary waves-effect">3</button>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Dropdown <i class="mdi mdi-chevron-down"></i> </button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="btn-group-vertical mb-1">
<button type="button" class="btn btn-secondary waves-effect">Top</button>
<button type="button" class="btn btn-secondary waves-effect">Middle</button>
<button type="button" class="btn btn-secondary waves-effect">Bottom</button>
</div>
</div>
<div class="col-md-3">
<div class="btn-group-vertical mb-1">
<button type="button" class="btn btn-secondary waves-effect">Button 1</button>
<button type="button" class="btn btn-secondary waves-effect">Button 2</button>
<button type="button" class="btn btn-secondary dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Button 3 <i class="mdi mdi-chevron-down"></i> </button>
<div class="dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Another action</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Something else</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
</div> <!-- container-fluid -->
</div> <!-- content -->
@@include('./partials/footer.html')
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
@@include('./partials/right-sidebar.html')
<!-- Vendor js -->
<script src="assets/js/vendor.min.js"></script>
<!-- App js -->
<script src="assets/js/app.min.js"></script>
</body>
</html>
