Buttons
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-secondary text-white bg-secondary">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-success bg-success text-white hover:bg-success-hover duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-danger bg-danger text-white hover:bg-danger-hover duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-info bg-info text-white hover:bg-info-hover duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-d-light-2 text-black bg-d-light-2 hover:bg-d-light duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-[#6e6e6e] text-white bg-[#6e6e6e] hover:text-white hover:bg-dark-2 duration-300">Dark</button>
Buttons With Icon
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300"><i class="fa-brands fa-accusoft mr-2"></i>Primary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-secondary text-white bg-secondary"><i class="fa-solid fa-table-cells-large mr-2"></i>Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-success bg-success text-white hover:bg-success-hover duration-300"><i class="fa-solid fa-gear mr-2"></i>Success</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-danger bg-danger text-white hover:bg-danger-hover duration-300"><i class="fa-solid fa-circle-exclamation mr-2"></i>Danger</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300"><i class="fa-solid fa-image mr-2"></i>Warning</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-info bg-info text-white hover:bg-info-hover duration-300"><i class="fa-solid fa-phone-volume mr-2"></i>Info</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-d-light-2 text-black bg-d-light-2 hover:bg-d-light duration-300"><i class="fa-solid fa-lock mr-2"></i>Light</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-[#6e6e6e] text-white bg-[#6e6e6e] hover:text-white hover:bg-dark-2 duration-300"><i class="fa-solid fa-circle-play mr-2"></i>Dark</button>
Buttons
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary-light text-primary bg-primary-light hover:text-white hover:bg-primary duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-badge-secondary text-secondary dark:text-white bg-badge-secondary hover:text-white hover:bg-secondary duration-300">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-success-light text-success bg-success-light hover:text-white hover:bg-success duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-danger-light text-danger bg-danger-light hover:text-white hover:bg-danger duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-warning-light text-warning bg-warning-light hover:text-white hover:bg-warning duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-info-light text-info bg-info-light hover:text-white hover:bg-info duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-d-light-2 text-black bg-d-light-2 hover:bg-d-light duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-[#6e6e6e] text-white bg-[#6e6e6e] hover:text-white hover:bg-dark-2 duration-300">Dark</button>
Outline Buttons
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-primary hover:bg-hover-primary hover:text-white duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-secondary text-secondary dark:text-white hover:bg-secondary hover:text-white duration-300">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-success text-success hover:bg-success hover:text-white duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-danger text-danger hover:bg-danger hover:text-white duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-warning text-warning hover:bg-warning hover:text-white duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-info text-info hover:bg-info hover:text-white duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-d-light text-light hover:bg-d-light-2 duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-dark text-dark hover:bg-[#6e6e6e] hover:text-white duration-300">Dark</button>
Button Sizes
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:py-4 xl:px-8 py-3 px-5 text-lg border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-lg">Large Button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Default Button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-semibold text-[15px] leading-5 py-[0.438rem] px-4 text-xs border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-xs">Extra Small Button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium py-[5px] px-[15px] text-[13px] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-sm">Small Button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium py-1.5 px-[0.9375rem] text-[0.6875rem] leading-[1.3] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-xxs">Extra Small Button</button>
Button Sizes Icon
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium py-4 px-[1.2rem] text-[15px] leading-5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-icon-lg"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium sm:text-[15px] text-xs leading-5 py-[0.719rem] px-[0.919rem] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-icon-md"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium sm:text-[15px] text-xs leading-5 py-[0.438rem] px-[0.6rem] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-icon-sm"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium py-[5px] px-[0.5375rem] text-[13px] leading-5 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-icon-xs"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium py-1.5 px-[0.275rem] text-[15px] leading-[1.3] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 btn-icon-xxs"><i class="fa-solid fa-house-chimney"></i></button>
Outline Button Sizes
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:py-4 xl:px-8 py-3 px-5 text-lg border border-primary text-primary hover:bg-primary hover:text-white duration-300 btn-lg">Large button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-primary hover:bg-primary hover:text-white duration-300 btn-md">Medium button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-primary hover:bg-primary hover:text-white duration-300">Default button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-semibold py-[0.438rem] px-4 text-xs border border-primary text-primary hover:bg-primary hover:text-white duration-300 btn-xs">Small button</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium py-1.5 px-[0.9375rem] text-[0.6875rem] leading-[1.3] border border-primary text-primary hover:bg-primary hover:text-white duration-300 btn-sm">Extra small button</button>
Rounded Buttons
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-secondary text-white bg-secondary">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-success bg-success text-white hover:bg-success-hover duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-danger bg-danger text-white hover:bg-danger-hover duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-info bg-info text-white hover:bg-info-hover duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-d-light-2 text-black bg-d-light-2 hover:bg-d-light duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-[#6e6e6e] text-white bg-[#6e6e6e] hover:text-white hover:bg-dark-2 duration-300">Dark</button>
Rounded outline Buttons
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-primary text-primary hover:bg-hover-primary hover:text-white duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-secondary text-secondary dark:text-white hover:bg-secondary hover:text-white duration-300">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-success text-success hover:bg-success hover:text-white duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-danger text-danger hover:bg-danger hover:text-white duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-warning text-warning hover:bg-warning hover:text-white duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-info text-info hover:bg-info hover:text-white duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-d-light text-light hover:bg-d-light-2 duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-dark text-dark hover:bg-[#6e6e6e] hover:text-white duration-300">Dark</button>
Button Right icons
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Add to cart <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fa fa-shopping-cart"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-info bg-info text-white hover:bg-info-hover duration-300">Add to wishlist <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fa fa-heart"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-danger bg-danger text-white hover:bg-danger-hover duration-300">Remove <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fas fa-times"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-secondary text-white bg-secondary">Sent message <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fa fa-envelope"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300">Add bookmark <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fa fa-star"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-success bg-success text-white hover:bg-success-hover duration-300">Success <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fa fa-check"></i></span>
</button>
Button Left icons
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">
<span class="text-primary mt-[-0.3rem] mr-[0.35rem] mb-[-0.2rem] ml-[-0.888rem] pt-[0.3rem] px-[0.6rem] pb-[0.2rem] float-left inline-block rounded bg-white"><i class="fa fa-shopping-cart"></i>
</span>Buy
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-info bg-info text-white hover:bg-info-hover duration-300">
<span class="text-info mt-[-0.3rem] mr-[0.35rem] mb-[-0.2rem] ml-[-0.888rem] pt-[0.3rem] px-[0.6rem] pb-[0.2rem] float-left inline-block rounded bg-white"><i class="fa fa-plus color-info"></i>
</span>Add
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-danger bg-danger text-white hover:bg-danger-hover duration-300">
<span class="text-danger mt-[-0.3rem] mr-[0.35rem] mb-[-0.2rem] ml-[-0.888rem] pt-[0.3rem] px-[0.6rem] pb-[0.2rem] float-left inline-block rounded bg-white"><i class="fa fa-envelope color-danger"></i>
</span>Email
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-secondary text-white bg-secondary">
<span class="text-secondary dark:text-white mt-[-0.3rem] mr-[0.35rem] mb-[-0.2rem] ml-[-0.888rem] pt-[0.3rem] px-[0.6rem] pb-[0.2rem] float-left inline-block rounded bg-white"><i
class="fa fa-share-alt color-secondary"></i> </span>Share
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300">
<span class="text-warning mt-[-0.3rem] mr-[0.35rem] mb-[-0.2rem] ml-[-0.888rem] pt-[0.3rem] px-[0.6rem] pb-[0.2rem] float-left inline-block rounded bg-white"><i class="fa fa-download color-warning"></i>
</span>Download
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-success bg-success text-white hover:bg-success-hover duration-300">
<span class="text-success mt-[-0.3rem] mr-[0.35rem] mb-[-0.2rem] ml-[-0.888rem] pt-[0.3rem] px-[0.6rem] pb-[0.2rem] float-left inline-block rounded bg-white"><i class="fa fa-upload color-success"></i>
</span>Upload
</button>
Square Buttons
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-secondary text-white bg-secondary">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-success bg-success text-white hover:bg-success-hover duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-danger bg-danger text-white hover:bg-danger-hover duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-info bg-info text-white hover:bg-info-hover duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-d-light-2 text-black bg-d-light-2 hover:bg-d-light duration-300">Light</button>
<button type="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-[#6e6e6e] text-white bg-[#6e6e6e] hover:text-white hover:bg-dark-2 duration-300">Dark</button>
Square Outline Buttons
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-primary text-primary hover:bg-hover-primary hover:text-white duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-secondary text-secondary dark:text-white hover:bg-secondary hover:text-white duration-300">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-success text-success hover:bg-success hover:text-white duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-danger text-danger hover:bg-danger hover:text-white duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-warning text-warning hover:bg-warning hover:text-white duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-info text-info hover:bg-info hover:text-white duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-d-light text-light hover:bg-d-light-2 duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 btn-square border border-dark text-dark hover:bg-[#6e6e6e] hover:text-white duration-300">Dark</button>
Rounded Button
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-secondary text-white bg-secondary">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-success bg-success text-white hover:bg-success-hover duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-danger bg-danger text-white hover:bg-danger-hover duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-info bg-info text-white hover:bg-info-hover duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-d-light-2 text-black bg-d-light-2 hover:bg-d-light duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-[#6e6e6e] text-white bg-[#6e6e6e] hover:text-white hover:bg-dark-2 duration-300">Dark</button>
Rounded outline Buttons
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-primary text-primary hover:bg-hover-primary hover:text-white duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-secondary text-secondary dark:text-white hover:bg-secondary hover:text-white duration-300">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-success text-success hover:bg-success hover:text-white duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-danger text-danger hover:bg-danger hover:text-white duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-warning text-warning hover:bg-warning hover:text-white duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-info text-info hover:bg-info hover:text-white duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-d-light text-light hover:bg-d-light-2 duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-dark text-dark hover:bg-[#6e6e6e] hover:text-white duration-300">Dark</button>
Dropdown Button
<div class="relative inline-flex" role="group">
<button type="button" class="mr-1 mb-2 inline-block rounded relative font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 dropdown-toggle dz-dropdown" data-dz-dropdown="dropdown1">Primary</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown1">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
<div class="relative inline-flex" role="group">
<button type="button" class="mr-1 mb-2 inline-block rounded relative font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-secondary text-white bg-secondary dropdown-toggle dz-dropdown" data-dz-dropdown="dropdown2">Secondary</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown2">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
<div class="relative inline-flex" role="group">
<button type="button" class="mr-1 mb-2 inline-block rounded relative font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-success bg-success text-white hover:bg-success-hover duration-300 dropdown-toggle dz-dropdown" data-dz-dropdown="dropdown3">Success</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown3">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
<div class="relative inline-flex" role="group">
<button type="button" class="mr-1 mb-2 inline-block rounded relative font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300 dropdown-toggle dz-dropdown" data-dz-dropdown="dropdown4">Warning</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown4">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
<div class="relative inline-flex" role="group">
<button type="button" class="mr-1 mb-2 inline-block rounded relative font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-danger bg-danger text-white hover:bg-danger-hover duration-300 dropdown-toggle dz-dropdown" data-dz-dropdown="dropdown5">Danger</button>
<div class="dz-dropdown-menu absolute rounded-md min-w-[10rem] z-[9] bottom-0 translate-y-[5.25rem] max-sm:translate-x-[-2.25rem] shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] py-2 hidden" id="dropdown5">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
Buttons Transparent
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-primary hover:bg-hover-primary hover:text-white duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-secondary dark:text-white hover:bg-secondary hover:text-white duration-300">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-success hover:bg-success-hover hover:text-white duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-danger hover:bg-danger-hover hover:text-white duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-warning hover:bg-[#ffa91a] hover:text-white duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-info hover:bg-info-hover hover:text-white duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-dark hover:bg-d-light duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 border border-transparent text-d-light-2 hover:text-white hover:bg-[#6e6e6e] duration-300">Dark</button>
Buttons Transparent Light
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent bg-transparent hover:bg-primary-light hover:text-primary duration-300">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent text-secondary dark:text-white bg-transparent hover:bg-badge-secondary duration-300">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent text-success bg-transparent hover:bg-success-light duration-300">Success</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent text-danger bg-transparent hover:bg-danger-light duration-300">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent text-warning bg-transparent hover:bg-warning-light duration-300">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent text-info bg-transparent hover:bg-info-light duration-300">Info</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent bg-transparent hover:bg-d-light duration-300">Light</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 tp-btn-light border border-transparent text-dark bg-transparent hover:bg-d-light duration-300">Dark</button>
Disabled Button
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-primary text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 pointer-events-none opacity-60" disabled="disabled">Primary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-secondary text-white bg-secondary pointer-events-none opacity-60" disabled="disabled">Secondary</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-success bg-success text-white hover:bg-success-hover duration-300 pointer-events-none opacity-60" disabled="disabled">Success</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-danger bg-danger text-white hover:bg-danger-hover duration-300 pointer-events-none opacity-60" disabled="disabled">Danger</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-warning bg-warning text-white hover:bg-[#ffa91a] duration-300 pointer-events-none opacity-60" disabled="disabled">Warning</button>
<button type="button" class="mr-1 mb-2 inline-block font-medium xl:text-[15px] text-xs leading-5 xl:py-[0.719rem] xl:px-[1.563rem] py-2.5 px-4 rounded-[2.5rem] border border-info bg-info text-white hover:bg-info-hover duration-300 pointer-events-none opacity-60" disabled="disabled">Info</button>
Socia icon Buttons with Name
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#2d4373] bg-facebook">Facebook <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-facebook-f"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#0c85d0] bg-twitter">Twitter <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-twitter"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#cc0000] bg-youtube">Youtube <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-youtube"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#992180] bg-instagram">Instagram
<span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-instagram"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#8c0615] bg-pinterest">Pinterest
<span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-pinterest-square"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#005983] bg-linkedin">Linkedin <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-linkedin-in"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#be2d23] bg-google-plus">Google +
<span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-google-plus-g"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#1266f1] bg-google">Google <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-google"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 duration-300 hover:bg-[#ccca00] bg-snapchat">Snapchat <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-snapchat"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#1da851] bg-whatsapp">Whatsapp <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-whatsapp"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#222e3d] bg-tumblr">Tumblr <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-tumblr"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#cc3700] bg-reddit">Reddit <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-reddit"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#18aa4c] bg-spotify">Spotify <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-spotify"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#2d0165] bg-yahoo">Yahoo <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-yahoo"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#e51e6b] bg-dribbble">Dribbble <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-dribbble"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#008abd] bg-skype">Skype <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-skype"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#771800] bg-quora">Quora <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-quora"></i></span>
</button>
<button type="button" class="mr-1 mb-2 inline-block rounded font-medium overflow-hidden text-[15px] leading-5 py-[0.719rem] px-[1.563rem] max-xl:py-2.5 max-xl:px-4 text-white duration-300 hover:bg-[#1295bf] bg-vimeo">Vimeo <span class="inline-block border-l border-d-light-2 -my-4 ml-4 -mr-1 py-[0.8rem] pl-5"><i class="fab fa-vimeo-v"></i></span>
</button>