# Buttons

##### Rounded Buttons

Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons

##### Full Rounded Buttons

Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons

##### Buttons with icons

Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons Buttons

##### Button Sizes

Large button Default Button Small button

    <!-- Colors-->
    <a class="btn btn-brand" href="#">Buttons</a>
    <a class="btn btn-primary" href="#">Buttons</a>
    <a class="btn btn-secondary" href="#">Buttons</a>
    <a class="btn btn-success" href="#">Buttons</a>
    <a class="btn btn-danger" href="#">Buttons</a>
    <a class="btn btn btn-warning" href="#">Buttons</a>
    <a class="btn btn-info" href="#">Buttons</a>
    <a class="btn btn-light" href="#">Buttons</a>
    <a class="btn btn-dark" href="#">Buttons</a>

    <!-- Outline Buttons-->
    <a class="btn btn-outline-brand" href="#">Buttons</a>
    <a class="btn btn-outline-primary" href="#">Buttons</a>
    <a class="btn btn-outline-secondary" href="#">Buttons</a>
    <a class="btn btn-outline-success" href="#">Buttons</a>
    <a class="btn btn-outline-danger" href="#">Buttons</a>
    <a class="btn btn-outline-warning" href="#">Buttons</a>
    <a class="btn btn-outline-info" href="#">Buttons</a>
    <a class="btn btn-outline-dark" href="#">Buttons</a>
    <a class="btn btn-outline-light" href="#">Buttons</a>

    <!-- Circle Buttons-->
    <a class="btn btn-circle btn-brand" href="#">Buttons</a>

    <!-- Button with icon-->
    <a class="btn btn-circle btn-brand" href="#"><span class="btn-icon-left far fa-gem"></span>Buttons</a>
    <a class="btn btn-circle btn-brand" href="#">Buttons<span class="btn-icon-right far fa-gem"></span></a>

    <!-- Button Sizes-->
    <a class="btn btn-brand btn-lg" href="#">Large button</a>
    <a class="btn btn-brand" href="#">Default Button</a>
    <a class="btn btn-brand btn-sm" href="#">Small button</a>

    // Colors
    a(class="btn btn-brand" href="#") Buttons
    a(class="btn btn-primary" href="#") Buttons
    a(class="btn btn-secondary" href="#") Buttons
    a(class="btn btn-success" href="#") Buttons
    a(class="btn btn-danger" href="#") Buttons
    a(class="btn btn btn-warning" href="#") Buttons
    a(class="btn btn-info" href="#") Buttons
    a(class="btn btn-light" href="#") Buttons
    a(class="btn btn-dark" href="#") Buttons

    // Outline Buttons
    a(class="btn btn-outline-brand" href="#") Buttons
    a(class="btn btn-outline-primary" href="#") Buttons
    a(class="btn btn-outline-secondary" href="#") Buttons
    a(class="btn btn-outline-success" href="#") Buttons
    a(class="btn btn-outline-danger" href="#") Buttons
    a(class="btn btn-outline-warning" href="#") Buttons
    a(class="btn btn-outline-info" href="#") Buttons
    a(class="btn btn-outline-dark" href="#") Buttons
    a(class="btn btn-outline-light" href="#") Buttons

    // Circle Buttons
    a(class="btn btn-circle btn-brand" href="#") Buttons

    // Button with icon
    a(class="btn btn-circle btn-brand" href="#")
       span.btn-icon-left.far.fa-gem
       |Buttons
    a(class="btn btn-circle btn-brand" href="#")
       |Buttons
       span.btn-icon-right.far.fa-gem

    // Button Sizes
    a(class="btn btn-brand btn-lg" href="#") Large button
    a(class="btn btn-brand" href="#") Default Button
    a(class="btn btn-brand btn-sm" href="#") Small button