<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Buttons</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>UI Elements</a>
            </li>
            <li class="active">
                <strong>Buttons</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="row wrapper wrapper-content">
<div class="col-lg-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Colors buttons</h5>
            <div ibox-tools></div>
        </div>
        <div class="ibox-content">
            <p>
                Use any of the available button classes to quickly create a styled button.
            </p>

            <h3 class="font-bold">
                Normal buttons
            </h3>

            <p>
                <button type="button" class="btn btn-w-m btn-default">Default</button>
                <button type="button" class="btn btn-w-m btn-primary">Primary</button>
                <button type="button" class="btn btn-w-m btn-success">Success</button>
                <button type="button" class="btn btn-w-m btn-info">Info</button>
                <button type="button" class="btn btn-w-m btn-warning">Warning</button>
                <button type="button" class="btn btn-w-m btn-danger">Danger</button>
                <button type="button" class="btn btn-w-m btn-white">Danger</button>
                <button type="button" class="btn btn-w-m btn-link">Link</button>
            </p>
        </div>
    </div>
</div>
<div class="col-lg-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Diferent size</h5>
            <div ibox-tools></div>
        </div>
        <div class="ibox-content">
            <p>
                If You want larger or smaller buttons You can add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> class.
            </p>

            <h3 class="font-bold">Button Sizes</h3>

            <p>
                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                <button type="button" class="btn btn-default btn-lg">Large button</button>
                <br/>
                <button type="button" class="btn btn-primary">Default button</button>
                <button type="button" class="btn btn-default">Default button</button>
                <br/>
                <button type="button" class="btn btn-primary btn-sm">Small button</button>
                <button type="button" class="btn btn-default btn-sm">Small button</button>
                <br/>
                <button type="button" class="btn btn-primary btn-xs">Mini button</button>
                <button type="button" class="btn btn-default btn-xs">Mini button</button>
            </p>
        </div>
    </div>
</div>
<div class="col-lg-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Outline and Block Buttons</h5>
            <div ibox-tools></div>
        </div>
        <div class="ibox-content">
            <p>
                Create block level buttons or outline buttons, by adding <code>.btn-block</code> or <code>.btn-outline</code>.
            </p>

            <h3 class="font-bold">Outline buttons</h3>

            <p>
                <button type="button" class="btn btn-outline btn-default">Default</button>
                <button type="button" class="btn btn-outline btn-primary">Primary</button>
                <button type="button" class="btn btn-outline btn-success">Success</button>
                <button type="button" class="btn btn-outline btn-info">Info</button>
                <button type="button" class="btn btn-outline btn-warning">Warning</button>
                <button type="button" class="btn btn-outline btn-danger">Danger</button>
                <button type="button" class="btn btn-outline btn-link">Link</button>
            </p>
            <h3 class="font-bold">Block buttons</h3>

            <p>
                <button type="button" class="btn btn-block btn-outline btn-primary">Primary</button>
            </p>
        </div>
    </div>
</div>
<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>3D Buttons</h5>
            <div ibox-tools></div>
        </div>
        <div class="ibox-content">
            <p>
                To add three diminsion to buttons You can add <code>.dim</code> class to button.
            </p>

            <h3 class="font-bold">Three diminsion button</h3>

            <button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i></button>
            <button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i></button>
            <button class="btn btn-danger  dim btn-large-dim" type="button"><i class="fa fa-heart"></i></button>
            <button class="btn btn-primary  dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
            <button class="btn btn-info  dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i></button>
            <button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i></button>
            <button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i></button>
            <button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i></button>
            <button class="btn btn-success  dim" type="button"><i class="fa fa-upload"></i></button>
            <button class="btn btn-info  dim" type="button"><i class="fa fa-paste"></i></button>
            <button class="btn btn-warning  dim" type="button"><i class="fa fa-warning"></i></button>
            <button class="btn btn-default  dim " type="button"><i class="fa fa-star"></i></button>
            <button class="btn btn-danger  dim " type="button"><i class="fa fa-heart"></i></button>

            <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i></button>
            <button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i></button>
            <button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i></button>
            <button class="btn btn-outline btn-success  dim" type="button"><i class="fa fa-upload"></i></button>
            <button class="btn btn-outline btn-info  dim" type="button"><i class="fa fa-paste"></i></button>
            <button class="btn btn-outline btn-warning  dim" type="button"><i class="fa fa-warning"></i></button>
            <button class="btn btn-outline btn-danger  dim " type="button"><i class="fa fa-heart"></i></button>

        </div>
    </div>
</div>
<div class="col-lg-12">
<div class="row">
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Button dropdowns</h5>
                <div ibox-tools></div>
            </div>
            <div class="ibox-content">
                <p>
                    Droppdowns buttons are avalible with any color and any size.
                </p>

                <h3 class="font-bold">Dropdowns / Icons</h3>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-warning" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-default" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>
                <br/>


                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-primary btn-sm" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-warning btn-sm" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-default btn-sm" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>
                <br/>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-primary btn-xs" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-warning btn-xs" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>

                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-default btn-xs" uib-dropdown-toggle>
                        Action <span class="caret"></span>
                    </button>
                    <ul role="menu" uib-dropdown-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>


                <p>
                    To buttons with any color or any size you can add extra icon on the left or the right side.
                </p>

                <h3 class="font-bold">Commom Icon Buttons</h3>

                <p>
                    <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;Submit</button>
                    <button class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">Upload</span></button>
                    <button class="btn btn-info " type="button"><i class="fa fa-paste"></i> Edit</button>
                    <button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">Warning</span></button>

                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-user-md"></i>
                    </a>
                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-group"></i>
                    </a>
                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-exchange"></i>
                    </a>
                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-check-circle-o"></i>
                    </a>
                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-road"></i>
                    </a>
                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-ambulance"></i>
                    </a>
                    <a class="btn btn-white btn-bitbucket">
                        <i class="fa fa-star"></i> Stared
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Grouped Buttons / Pagination</h5>
                <div ibox-tools></div>
            </div>
            <div class="ibox-content">
                <p>
                    This is a group of buttons, ideal for sytuation where many actions are related to same element.
                </p>

                <h3 class="font-bold">Button Group</h3>

                <div class="btn-group">
                    <button class="btn btn-white" type="button">Left</button>
                    <button class="btn btn-primary" type="button">Middle</button>
                    <button class="btn btn-white" type="button">Right</button>
                </div>
                <br/>
                <h3>Pagination</h3>
                <uib-pagination total-items="main.bigTotalItems" ng-model="main.bigCurrentPage" max-size="main.maxSize" class="pagination-sm" boundary-links="true"></uib-pagination>
                <pre>Page: {{main.bigCurrentPage}}</pre>
            </div>
        </div>
    </div>
</div>
<div class="ibox float-e-margins">
    <div class="ibox-title">
        <h5>Toggle Buttons</h5>
        <div ibox-tools></div>
    </div>
    <div class="ibox-content">
        <h3 class="font-bold">Toggle buttons Variations</h3>

        <div class="row">
        <div class="col-lg-6">

        <p>Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what happens</p>

        <h4>Single toggle</h4>
        <pre>{{main.singleModel}}</pre>
        <button type="button" class="btn btn-primary" ng-model="main.singleModel" uib-btn-checkbox uib-btn-checkbox-true="1" uib-btn-checkbox-false="0">
            Single Toggle
        </button>
        <h4>Checkbox</h4>
        <pre>{{main.checkModel}}</pre>
        <div class="btn-group">
            <label class="btn btn-primary" ng-model="main.checkModel.left" uib-btn-checkbox>Left</label>
            <label class="btn btn-primary" ng-model="main.checkModel.middle" uib-btn-checkbox>Middle</label>
            <label class="btn btn-primary" ng-model="main.checkModel.right" uib-btn-checkbox>Right</label>
        </div>
</div>
            <div class="col-lg-6">
                <h4>Radio &amp; Uncheckable Radio</h4>
                <pre>{{main.radioModel || 'null'}}</pre>
                <div class="btn-group">
                    <label class="btn btn-primary" ng-model="main.radioModel" uib-btn-radio="'Left'">Left</label>
                    <label class="btn btn-primary" ng-model="main.radioModel" uib-btn-radio="'Middle'">Middle</label>
                    <label class="btn btn-primary" ng-model="main.radioModel" uib-btn-radio="'Right'">Right</label>
                </div>
                <div class="btn-group">
                    <label class="btn btn-success" ng-model="main.radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
                    <label class="btn btn-success" ng-model="main.radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
                    <label class="btn btn-success" ng-model="main.radioModel" uib-btn-radio="'Right'" uncheckable>Right</label>
                </div>
                <div class="btn-group">
                    <label class="btn btn-warning" ng-model="main.radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
                    <label class="btn btn-warning" ng-model="main.radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
                    <label class="btn btn-warning" ng-model="main.radioModel" uib-btn-radio="'Right'" uncheckable>Right</label>
                </div>
                <div class="btn-group">
                    <label class="btn btn-default" ng-model="main.radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
                    <label class="btn btn-default" ng-model="main.radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
                    <label class="btn btn-default" ng-model="main.radioModel" uib-btn-radio="'Right'" uncheckable>Right</label>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="col-lg-12">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Circle Icon Buttons</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <p>
                        For buttons you can add <code>.btn-circle</code> to rounded buttons and make it circle.
                    </p>

                    <h3 class="font-bold">Circle buttons</h3>
                    <br/>
                    <button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
                    </button>
                    <button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
                    </button>
                    <button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
                    </button>
                    <button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
                    </button>
                    <button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
                    </button>
                    <button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
                    </button>
                    <button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
                    </button>
                    <br/>
                    <br/>
                    <button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
                    </button>
                    <button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
                    </button>
                    <button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
                    </button>
                    <button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
                    </button>
                    <button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
                    </button>
                    <button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
                    </button>
                    <button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
                    </button>

                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Rounded Buttons</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <p>
                        You can also add <code>.btn-rounded</code> class to round buttons.
                    </p>

                    <h3 class="font-bold">Button Group</h3>

                    <p>
                        <a class="btn btn-default btn-rounded" href="">Default</a>
                        <a class="btn btn-primary btn-rounded" href="">Primary</a>
                        <a class="btn btn-success btn-rounded" href="">Success</a>
                        <a class="btn btn-info btn-rounded" href="">Info</a>
                        <a class="btn btn-warning btn-rounded" href="">Warning</a>
                        <a class="btn btn-danger btn-rounded" href="">Danger</a>
                        <a class="btn btn-danger btn-rounded btn-outline" href="">Danger</a>
                        <br/>
                        <br/>
                        <a class="btn btn-primary btn-rounded btn-block" href=""><i class="fa fa-info-circle"></i> Block rounded with icon button</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>
</div>