Search Here

Default Buttons 


    <a href="#" class="btn btn-primary">Primary Button</a>
    <a href="#" class="btn btn-secondary">Secondary Button</a>
    <a href="#" class="btn btn-outline">Outline Button</a>
    <a href="#" class="btn btn-light">Light Button</a>
How to Use

Change the default contextual classes name with -outlined for outlined button. For example: change btn-primary to btn-outlined

.btn-light is only for colored backgrounds

Primary Button Secondary Button Outline Button Light Button

Button Types 


    <!-- Rounded Buttons -->
    <a href="#" class="btn rounded-0 btn-primary ">Primary Button</a>
    <a href="#" class="btn rounded-0 btn-secondary ">Secondary Button</a>
    <a href="#" class="btn rounded-0 btn-outline ">Outline Button</a>
    <a href="#" class="btn rounded-0 btn-light ">Light Button</a>

    <!-- Square Buttons -->
    <a href="#" class="btn btn-primary">Primary Button</a>
    <a href="#" class="btn btn-secondary">Secondary Button</a>
    <a href="#" class="btn btn-outline">Outline Button</a>
    <a href="#" class="btn btn-light">Light Button</a>
How to Use

Change the default contextual classes name with -outlined for outlined button. For example: change btn-primary to btn-outlined

Add rounded-0 class with btn for square button. For example: Add rounded-0 with btn

.btn-light is only for colored backgrounds

Primary Button Secondary Button Outline Button Light Button
Primary Button Secondary Button Outline Button Light Button

Button Sizes 


    <!-- Rounded Buttons -->
    <a href="#" class="btn rounded-0 btn-primary ">Primary Button</a>
    <a href="#" class="btn rounded-0 btn-secondary ">Secondary Button</a>
    <a href="#" class="btn btn-outline ">Outline Button</a>
    <a href="#" class="btn btn-light ">Light Button</a>

    <!-- Square Buttons -->
    <a href="#" class="btn btn-sm rounded-0 btn-primary">Primary Small</a>
    <a href="#" class="btn btn-sm rounded-0 btn-secondary">Secondary Small</a>
    <a href="#" class="btn btn-sm btn-outline">Outline Small</a>
    <a href="#" class="btn btn-sm btn-light">Light Small</a>
How to Use

Change the default contextual classes name with -outlined for outlined button. For example: change btn-primary to btn-outlined

Add rounded-0 class with btn for square button. For example: Add rounded-0 with btn

For small button add an .btn-sm with .btn class

.btn-light is only for colored backgrounds

Primary Button Secondary Button Outline Button Light Button
Primary small Secondary small Outline small Light small