{% set header_title = 'Buttons' %}
{% set header_size = 'sm' %}
{% extends 'layouts/layout-1.html' %}

{% block content %}

    <!-- START: Featured Buttons -->
    <div class="nk-box bg-dark-4 text-center">
        <div class="nk-gap-4"></div>
        <div class="container">
            <a href="#" class="nk-btn nk-btn-md nk-btn-rounded link-effect-4">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-md link-effect-1 nk-btn-color-main-2">
                <span class="icon ion-paper-airplane"></span>
                Button
            </a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-style-1 nk-btn-md nk-btn-color-main-1">
                Button
            </a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-md nk-btn-color-primary nk-btn-bg-white">
                Button
            </a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-style-2 nk-btn-md">
                <span>Button</span>
                <span class="icon"><i class="fa fa-css3"></i></span>
            </a>
        </div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Featured Buttons -->

    <!-- START: Colors -->
    <div class="nk-box text-center">
        <div class="nk-gap-4"></div>
        <div class="container">
            <h2 class="nk-title h3">Colors</h2>
            <div class="nk-gap-1"></div>

            <a href="#" class="nk-btn nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-main-2">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-main-3">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-main-4">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-main-5">Button</a>

            <div class="nk-gap-1"></div>

            <a href="#" class="nk-btn nk-btn-color-primary">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-success">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-info">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-warning">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-danger">Button</a>

            <div class="nk-gap-1"></div>

            <a href="#" class="nk-btn nk-btn-color-dark-1 nk-btn-bg-white">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-white nk-btn-bg-main-3">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-white nk-btn-bg-main-4">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-white nk-btn-bg-success">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-color-white nk-btn-bg-danger">Button</a>
        </div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Colors -->

    <!-- START: Circle -->
    <div class="nk-box text-center">
        <div class="nk-gap-4"></div>
        <div class="container">
            <h2 class="nk-title h3">Circle</h2>
            <div class="nk-gap-1"></div>

            <a href="#" class="nk-btn nk-btn-circle nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-circle nk-btn-color-main-2">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-circle nk-btn-color-main-3">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-circle nk-btn-color-main-4">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-circle nk-btn-color-main-5">Button</a>
        </div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Circle -->

    <!-- START: Sizes -->
    <div class="nk-box text-center">
        <div class="nk-gap-4"></div>
        <div class="container">
            <h2 class="nk-title h3">Sizes</h2>
            <div class="nk-gap-1"></div>

            <a href="#" class="nk-btn nk-btn-xs nk-btn-rounded nk-btn-outline nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-sm nk-btn-rounded nk-btn-outline nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-rounded nk-btn-outline nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-lg nk-btn-rounded nk-btn-outline nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-x2 nk-btn-rounded nk-btn-outline nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-x3 nk-btn-rounded nk-btn-outline nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-x4 nk-btn-rounded nk-btn-outline nk-btn-color-main-1">Button</a>

            <div class="nk-gap-3"></div>

            <a href="#" class="nk-btn nk-btn-x4 nk-btn-circle nk-btn-3d nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-x3 nk-btn-circle nk-btn-3d nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-x2 nk-btn-circle nk-btn-3d nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-lg nk-btn-circle nk-btn-3d nk-btn-color-main-1">Button</a>
            &nbsp;&nbsp;
            <a href="#" class="nk-btn nk-btn-circle nk-btn-3d nk-btn-color-main-1">Button</a>
            &nbsp;
            <a href="#" class="nk-btn nk-btn-sm nk-btn-circle nk-btn-3d nk-btn-color-main-1">Button</a>
            &nbsp;
            <a href="#" class="nk-btn nk-btn-xs nk-btn-circle nk-btn-3d nk-btn-color-main-1">Button</a>

        </div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Sizes -->

    <!-- START: Block -->
    <div class="nk-box text-center">
        <div class="nk-gap-4"></div>
        <div class="container">
            <h2 class="nk-title h3">Block</h2>
            <div class="nk-gap-1"></div>

            <a href="#" class="nk-btn nk-btn-x2 nk-btn-block nk-btn-rounded nk-btn-color-main-1">Button</a>
            <br>
            <a href="#" class="nk-btn nk-btn-x2 nk-btn-block nk-btn-rounded nk-btn-color-main-2">Button</a>
        </div>
        <div class="nk-gap-4"></div>
        <div class="nk-gap-4"></div>
    </div>
    <!-- END: Block -->

{% endblock %}