×

Buttons

Buttons are also called as call to action. We have range of buttons and their states. You may use a tag or button element, you just need to add the respective classes, and you are good to go.

Examples

Solid buttons

default btn Click Me Click Me Click Me Click Me Click Me Click Me Click Me
Click Me Click Me Click Me Click Me Click Me 
                   
<a href="#" class="btn">default btn</a>
<a href="#" class="btn btn-solid-pink text-white">Pink Button</a>
<a href="#" class="btn btn-solid-rose text-white btn-lg">
    <span class="button-text">Rose Solid Button</span>
</a>
<a href="#" class="btn btn-sm btn-solid-fuchsia shadow-sm text-white">click me</a>
<a href="#" class="btn btn-solid-purple shadow-md text-white btn-lg">click me</a>
<a href="#" class="btn btn-solid-amber shadow-lg text-white"> btn</a>
<a href="#" class="btn btn-solid-violet shadow-xl text-white">click me</a>
<a href="#" class="btn btn-solid-blue text-white">click me</a>
<a href="#" class="btn btn-solid-sky text-white">click me</a>
<a href="#" class="btn btn-solid-cyan text-white">click me</a>
<a href="#" class="btn btn-solid-teal text-white">click me</a>
<a href="#" class="btn btn-solid-red text-white">click me</a>
<a href="#" class="btn bg-pink-700 text-white">click me</a>

Outline buttons

Click Me Click Me Click Me Click Me Click Me
Click Me Click Me Click Me Click Me Click Me Click Me Click Me Click Me 
                   
<!-- outline buttons -->

<a href="#" class="btn shadow-md btn-outline-pink">Pink Button</a>
<a href="#" class="btn shadow-md btn-outline-rose">Rose Button</a>
<a href="#" class="btn shadow-md btn-outline-fuchsia">click me</a>
<a href="#" class="btn shadow-md btn-outline-purple">click me</a>
<a href="#" class="btn shadow-md btn-outline-amber"> btn</a>
<a href="#" class="btn shadow-md btn-outline-violet">click me</a>
<a href="#" class="btn shadow-md btn-outline-blue">click me</a>
<a href="#" class="btn btn-outline-sky">click me</a>
<a href="#" class="btn btn-outline-cyan">click me</a>
<a href="#" class="btn btn-outline-teal">click me</a>
<a href="#" class="btn btn-outline-red">click me</a>

Link buttons

Click Me Click Me Click Me Click Me Click Me
Click Me Click Me Click Me Click Me Click Me Click Me Click Me Click Me 
                   
<!-- link buttons -->

<a href="#" class="btn btn-link-pink">Pink Button</a>
<a href="#" class="btn btn-link-rose">Rose Button</a>
<a href="#" class="btn btn-link-fuchsia">click me</a>
<a href="#" class="btn btn-link-purple">click me</a>
<a href="#" class="btn btn-link-amber"> btn</a>
<a href="#" class="btn btn-link-violet">click me</a>
<a href="#" class="btn btn-link-blue">click me</a>
<a href="#" class="btn btn-link-sky">click me</a>
<a href="#" class="btn btn-link-cyan">click me</a>
<a href="#" class="btn btn-link-teal">click me</a>
<a href="#" class="btn btn-link-red">click me</a>
<a href="#" class="btn btn-link-cyan">click me</a>
<a href="#" class="btn btn-link-teal">click me</a>

Toggle , Icon and Floating Action buttons

Add to Cart 
                   
<!-- toggle and Floating Action Buttons -->

<a class="bg-blue-500 text-white btn-float-action"><i class="fas fa-plus"></i></a>
<label class="btn-toggle">
    <input class="btn-checkbox" type="checkbox" />
    <span class="btn-slider-round"></span>
</label>

<a class="btn text-rose-500 text-hover-rose-400">
    <span><i class="fas fa-shopping-cart"></i></span>
</a>
<a href="#" class="btn btn-solid-rose text-white">
    <span><i class="btn-icon fas fa-shopping-cart"></i></span>
    Add to Cart
</a>
Badge Cards