@extends('layouts.default')
{{-- Page title --}}
@section('title')
    Buttons @parent
@stop
{{-- page level styles --}}
@section('header_styles')
    <!-- page vendors -->


    <!--end of page vendors -->

@stop
{{-- Page content --}}
@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Buttons</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Content</a></li>
                <li class="breadcrumb-item active" aria-current="page">Buttons</li>
            </ol>
        </div>
        <div class="separator-breadcrumb border-top"></div>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card ">
                    <div class="card-body">
                        <h5>Buttons Colors</h5>
                        <p>This page provides different styles of buttons, To achieve the button styles there is need of the
                            following classes,
                            Different Style of buttons makes template beautiful.
                        </p>
                        <div class="row">

                            <div class="col-md-3">
<button type="button" class="btn btn-primary mt-10px">Primary</button>
<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-primary pt-30px pb-30px"></div>
<div class="bg-primary-light pt-30px pb-30px"></div>
<div class="bg-primary-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#50a1ff </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
<button type="button" class="btn btn-secondary mt-10px"> secondary</button>
<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-secondary pt-30px pb-30px"></div>
<div class="bg-secondary-light pt-30px pb-30px"></div>
<div class="bg-secondary-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#e9ecf0 </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
<button type="button" class="btn btn-success mt-10px "> Success</button>
<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-success pt-30px pb-30px"></div>
<div class="bg-success-light pt-30px pb-30px"></div>
<div class="bg-success-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#3cd458 </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
<button type="button" class="btn btn-danger mt-10px "> Danger</button>
<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-danger pt-30px pb-30px"></div>
<div class="bg-danger-light pt-30px pb-30px"></div>
<div class="bg-danger-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#ff4954 </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row mt-4">
                            <div class="col-md-3">
<button type="button" class="btn btn-warning mt-10px "> Warning</button>
<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-warning pt-30px pb-30px"></div>
<div class="bg-warning-light pt-30px pb-30px"></div>
<div class="bg-warning-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#ffba00 </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mt-3">
                                <button type="button" class="btn btn-info "> Info</button>

<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-info pt-30px pb-30px"></div>
<div class="bg-info-light pt-30px pb-30px"></div>
<div class="bg-info-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#727cf5 </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
<button type="button" class="btn btn-light mt-10px "> Light</button>
<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-light pt-30px pb-30px"></div>
<div class="bg-light-light pt-30px pb-30px"></div>
<div class="bg-light-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#fff </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
<button type="button" class="btn btn-dark mt-10px "> Dark</button>
<div class="row m-l-5 mt-10px">
                                    <div class="col-1 p-0">
<div class="bg-dark pt-30px pb-30px"></div>
<div class="bg-dark-light pt-30px pb-30px"></div>
<div class="bg-dark-dark pt-30px pb-30px"></div>
                                    </div>
                                    <div class="col-10 bg-white b-a b-grey padding-10">
<p class="text-uppercase fs-12">Normal</p>
<p class="fs-12">#fff </p>
<p class="text-uppercase fs-12">Hover</p>
<p class="fs-12">7.5% white </p>
<p class="text-uppercase fs-12">Active</p>
<p class="fs-12">10% white </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
<div class="col-12 mt-40px">
                                <h5 class="m-t-25">Default Buttons</h5>
<button type="button" class="btn btn-primary  mt-10px"> Primary</button>
<button type="button" class="btn btn-secondary  mt-10px"> secondary</button>
<button type="button" class="btn btn-success  mt-10px"> Success</button>
<button type="button" class="btn btn-danger  mt-10px"> Danger</button>
<button type="button" class="btn btn-warning  mt-10px"> Warning</button>
<button type="button" class="btn btn-info  mt-10px"> Info</button>
<button type="button" class="btn btn-dark  mt-10px"> Dark</button>
                            </div>
                        </div>
                        <div class="row">
<div class="col-12 mt-40px">
                                <h5 class="m-t-25">Buttons Size</h5>
                                <p>Add .btn-lg or .btn-sm for additional sizes.</p>
<button type="button" class="btn btn-primary btn-lg  mt-10px"> Primary</button>
<button type="button" class="btn btn-secondary btn-lg  mt-10px"> secondary</button>
<button type="button" class="btn btn-success btn-lg  mt-10px"> Success</button>
<button type="button" class="btn btn-danger btn-lg mt-10px"> Danger</button>
<button type="button" class="btn btn-warning btn-lg mt-10px"> Warning</button>
<button type="button" class="btn btn-info btn-lg mt-10px"> Info</button>
<button type="button" class="btn btn-dark btn-lg mt-10px"> Dark</button>
<button type="button" class="btn btn-light btn-lg mt-10px"> Light</button>
                            </div>
                        </div>
                        <div class="row">
<div class="col-12 mt-40px">
                                <h5 class="m-t-25">Outline Buttons</h5>
                                <p>Add <code>.btn-outline-*</code> class to select the Contextual class of button
                                    <code>*</code>specifics the btn classes like <code>primary, secondary,..</code>
                                </p>
<button type="button" class="btn btn-outline-primary   mt-10px"> Primary</button>
<button type="button" class="btn btn-outline-secondary  mt-10px">
                                    secondary</button>
<button type="button" class="btn btn-outline-success  mt-10px"> Success</button>
<button type="button" class="btn btn-outline-warning  mt-10px"> Warning</button>
<button type="button" class="btn btn-outline-danger  mt-10px"> Danger</button>
<button type="button" class="btn btn-outline-info  mt-10px"> Info</button>
<button type="button" class="btn btn-outline-dark  mt-10px"> Dark</button>
<button type="button" class="btn btn-outline-light  mt-10px"> Light</button>
                            </div>
                        </div>
<div class="row mt-40px">
                            <div class="col-lg-5 col-12">
                                <div class="row">
                                    <div class="col-10">
                                        <h5 class="m-t-25">Block Buttons</h5>
<div class="d-grid gap-3 mt-10px">
                                            <button type="button" class="btn btn-primary">
                                                Primary</button>
                                            <button type="button" class="btn btn-secondary">
                                                secondary</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-12">
                                <h5 class="m-t-25">Button Group</h5>
<div class="btn-group mt-10px">
                                    <button type="button" class="btn btn-secondary">Left</button>
                                    <button type="button" class="btn btn-secondary">Middle</button>
                                    <button type="button" class="btn btn-secondary">Right</button>
                                </div>
                            </div>
                            <div class="col-lg-4 col-12">
                                <h5 class="m-t-25">Checkbox and radio buttons</h5>
<div class="btn-group mt-10px" role="group">
                                    <input type="radio" class="btn-check" name="options" id="activecheck"
                                        autocomplete="off" checked>
                                    <label class="btn btn-primary " for="activecheck">Active</label>
                                    <input type="radio" class="btn-check" name="options" id="radiocheck"
                                        autocomplete="off">
                                    <label class="btn btn-primary" for="radiocheck">Radio </label>
                                    <input type="checkbox" class="btn-check" name="options" id="radiocheck2"
                                        autocomplete="off">
                                    <label class="btn btn-primary" for="radiocheck2">Checkbox </label>
                                </div>
                            </div>
                        </div>
<div class="row mt-40px">
                            <h5 class="m-t-25">Active Buttons</h5>
                            <div class="col-lg-12 col-12">
<button type="button" class="btn btn-primary btn-lg active  mt-10px">
                                    Primary</button>
<button type="button" class="btn btn-secondary btn-lg active  mt-10px">
                                    secondary</button>
<button type="button" class="btn btn-success btn-lg active  mt-10px">
                                    Success</button>
<button type="button" class="btn btn-danger btn-lg active  mt-10px">
                                    Danger</button>
<button type="button" class="btn btn-warning btn-lg active  mt-10px">
                                    Warning</button>
<button type="button" class="btn btn-info btn-lg active  mt-10px "> Info</button>
<button type="button" class="btn btn-dark btn-lg active  mt-10px"> Dark</button>
                            </div>
                        </div>
                        <div class="row">
<div class="col-lg-12 mt-40px">
<h5 class="m-t-25">Rounded Buttons</h5>
                                <button type="button"
class="btn rounded-pill btn-primary btn-lg mt-10px w-140px">Primary</button>
                                <button type="button"
class="btn rounded-pill btn-secondary btn-lg mt-10px w-140px">Secondary</button>
                                <button type="button"
class="btn rounded-pill btn-success btn-lg mt-10px w-140px">Success</button>
                                <button type="button"
class="btn rounded-pill btn-danger btn-lg mt-10px w-140px">Danger</button>
                                <button type="button"
class="btn rounded-pill btn-warning btn-lg mt-10px w-140px">Warning</button>
                                <button type="button"
class="btn rounded-pill btn-info btn-lg mt-10px w-140px">Info</button>
                                <button type="button"
class="btn rounded-pill btn-dark btn-lg mt-10px  w-140px">Dark</button>
                                <button type="button"
class="btn rounded-pill btn-light btn-lg mt-10px w-140px">Light</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- /.content -->

@stop
@section('footer_scripts')

@stop