Tailwind CSS Buttons Components
Tailwind CSS Buttons are designed for use in TailGrids. They are styled to match the existing Tailwind CSS framework, so they'll look great with any Tailwind design. It is simply not possible to have a website without buttons. Buttons essentially help users to click on certain icons so that they can navigate through a website with ease. At TailGrids, you can find an extensive range of buttons Tailwind CSS components to give a new level of depth and flair to your website. These Tailwind sections have been created with a lot of love and expertise by our team of professionals and that is exactly what is going to come across to your customers. TailGrids offers a wide array of button styles that you can choose from such as semi-rounded button style, square button style, full rounded button style and much more. Hence, you can choose the one that works best for you according to your needs.
Primary Square Button
FREE
FREE
Primary Square Button<a
href="javascript:void(0)"
class="bg-primary inline-flex items-center justify-center py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Secondary Square Button
FREE
FREE
Secondary Square Button<a
href="javascript:void(0)"
class="bg-secondary inline-flex items-center justify-center py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Dark Square Button
FREE
FREE
Dark Square Button<a
href="javascript:void(0)"
class="inline-flex items-center justify-center bg-black py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Secondary Full Rounded Button
FREE
FREE
Secondary Full Rounded Button<a
href="javascript:void(0)"
class="bg-secondary inline-flex items-center justify-center rounded-full py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Dark Full Rounded Button
FREE
FREE
Dark Full Rounded Button<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full bg-black py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Primary Semi Rounded Button
FREE
FREE
Primary Semi Rounded Button<a
href="javascript:void(0)"
class="bg-primary inline-flex items-center justify-center rounded-md py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Secondary Semi Rounded Button
FREE
FREE
Secondary Semi Rounded Button<a
href="javascript:void(0)"
class="bg-secondary inline-flex items-center justify-center rounded-md py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Dark Outline Button
FREE
FREE
Dark Outline Button<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-black py-4 px-10 text-center text-base text-black transition hover:border-black hover:bg-black hover:text-white lg:px-8 xl:px-10"
>
View Details
</a>
Dark Semi Rounded Button
FREE
FREE
Dark Semi Rounded Button<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md bg-black py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Primary Full Rounded Button
FREE
FREE
Primary Full Rounded Button<a
href="javascript:void(0)"
class="bg-primary inline-flex items-center justify-center rounded-full py-4 px-10 text-center text-base font-normal text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
Get Started
</a>
Primary Outline Button
FREE
FREE
Primary Outline Button<a
href="javascript:void(0)"
class="text-primary border-primary hover:bg-primary hover:border-primary inline-flex items-center justify-center rounded-md border py-4 px-10 text-center text-base transition hover:text-white lg:px-8 xl:px-10"
>
View Details
</a>
Secondary Outline Button
FREE
FREE
Secondary Outline Button<a
href="javascript:void(0)"
class="text-secondary border-secondary hover:bg-secondary hover:border-secondary inline-flex items-center justify-center rounded-md border py-4 px-10 text-center text-base transition hover:text-white lg:px-8 xl:px-10"
>
View Details
</a>
Secondary Square Button With Icon
FREE
FREE
Secondary Square Button With Icon<a href="javascript:void(0)" class="bg-secondary inline-flex items-center justify-center py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.8125 16.6652H2.1875C1.69022 16.6652 1.21331 16.4677 0.861675 16.1161C0.510044 15.7644 0.3125 15.2875 0.3125 14.7902V5.20898C0.3125 4.7117 0.510044 4.23479 0.861675 3.88316C1.21331 3.53153 1.69022 3.33398 2.1875 3.33398H17.8125C18.3098 3.33398 18.7867 3.53153 19.1383 3.88316C19.49 4.23479 19.6875 4.7117 19.6875 5.20898V14.7902C19.6875 15.2875 19.49 15.7644 19.1383 16.1161C18.7867 16.4677 18.3098 16.6652 17.8125 16.6652ZM2.1875 4.58398C2.02174 4.58398 1.86277 4.64983 1.74556 4.76704C1.62835 4.88425 1.5625 5.04322 1.5625 5.20898V14.7902C1.5625 14.956 1.62835 15.115 1.74556 15.2322C1.86277 15.3494 2.02174 15.4152 2.1875 15.4152H17.8125C17.9783 15.4152 18.1372 15.3494 18.2544 15.2322C18.3717 15.115 18.4375 14.956 18.4375 14.7902V5.20898C18.4375 5.04322 18.3717 4.88425 18.2544 4.76704C18.1372 4.64983 17.9783 4.58398 17.8125 4.58398H2.1875Z" fill="white"></path>
<path d="M10.0016 10.643C9.63422 10.643 9.27406 10.5413 8.96093 10.3493L0.889055 5.44927C0.746501 5.36308 0.644027 5.22378 0.604175 5.06203C0.584443 4.98194 0.580678 4.89875 0.593097 4.8172C0.605516 4.73566 0.633875 4.65736 0.676555 4.58677C0.719234 4.51619 0.775399 4.4547 0.841842 4.40582C0.908284 4.35694 0.983704 4.32163 1.06379 4.30189C1.22554 4.26204 1.3965 4.28808 1.53905 4.37427L9.61093 9.28052C9.72906 9.35258 9.86475 9.3907 10.0031 9.3907C10.1415 9.3907 10.2772 9.35258 10.3953 9.28052L18.4641 4.37427C18.5342 4.33159 18.6121 4.30315 18.6933 4.29058C18.7745 4.278 18.8573 4.28154 18.9371 4.30098C19.0169 4.32042 19.0921 4.35539 19.1584 4.40389C19.2247 4.45239 19.2808 4.51347 19.3234 4.58365C19.3661 4.65382 19.3945 4.73172 19.4071 4.81288C19.4197 4.89405 19.4162 4.9769 19.3967 5.0567C19.3773 5.1365 19.3423 5.21169 19.2938 5.27797C19.2453 5.34426 19.1842 5.40034 19.1141 5.44302L11.0422 10.3493C10.7291 10.5413 10.3689 10.643 10.0016 10.643Z" fill="white"></path>
</svg>
</span>
Button With Icon
</a>
Primary Semi Rounded Button With Icon
FREE
FREE
Primary Semi Rounded Button With Icon<a href="javascript:void(0)" class="bg-primary inline-flex items-center justify-center rounded-[5px] py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M18.0738 0.849609H16.0676C15.8171 0.850867 15.5754 0.942155 15.3867 1.10681C15.1979 1.27146 15.0747 1.4985 15.0394 1.74648L14.4769 5.80898H13.3957V3.40273C13.3933 3.16503 13.2982 2.93766 13.1307 2.76899C12.9632 2.60031 12.7365 2.50367 12.4988 2.49961H10.0801C10.0533 2.27727 9.94785 2.07185 9.78277 1.92052C9.61769 1.7692 9.40389 1.68196 9.18007 1.67461H6.45194C6.3269 1.67779 6.20376 1.70595 6.08977 1.75745C5.97578 1.80895 5.87325 1.88274 5.78821 1.97447C5.70318 2.0662 5.63736 2.17402 5.59464 2.29158C5.55191 2.40914 5.53315 2.53406 5.53944 2.65898V3.32461H3.14882C2.91201 3.32126 2.68348 3.41171 2.51312 3.57622C2.34275 3.74073 2.24437 3.96595 2.23944 4.20273V5.81211C2.09795 5.81502 1.95882 5.84901 1.83192 5.91165C1.70501 5.97429 1.59343 6.06406 1.50507 6.17461C1.41421 6.29057 1.35071 6.42556 1.31933 6.5695C1.28794 6.71343 1.28948 6.8626 1.32382 7.00586C1.32248 7.02146 1.32248 7.03714 1.32382 7.05273L3.23632 12.9371C3.29128 13.1429 3.41335 13.3244 3.58318 13.4529C3.753 13.5814 3.96087 13.6495 4.17382 13.6465H13.3863C13.7359 13.6461 14.0736 13.5193 14.3372 13.2896C14.6008 13.0599 14.7725 12.7428 14.8207 12.3965L16.2488 2.09961H18.0707C18.2365 2.09961 18.3954 2.03376 18.5126 1.91655C18.6298 1.79934 18.6957 1.64037 18.6957 1.47461C18.6957 1.30885 18.6298 1.14988 18.5126 1.03267C18.3954 0.915457 18.2365 0.849609 18.0707 0.849609H18.0738ZM12.1363 5.79336H10.0926V3.74961H12.1457L12.1363 5.79336ZM6.78944 2.91523H8.84257V3.39961V5.79023H6.78944V2.91523ZM3.48944 4.56523H5.53944V5.79336H3.48944V4.56523ZM13.5832 12.2246C13.5771 12.2724 13.5537 12.3163 13.5174 12.3479C13.4811 12.3796 13.4345 12.3969 13.3863 12.3965H4.37382L2.65194 7.04961H14.3019L13.5832 12.2246Z"></path>
<path d="M5.31172 15.1133C4.9118 15.1102 4.51997 15.226 4.18594 15.4459C3.85191 15.6659 3.59073 15.9801 3.43553 16.3487C3.28034 16.7173 3.23813 17.1236 3.31425 17.5163C3.39037 17.9089 3.58139 18.2701 3.86309 18.5539C4.14478 18.8378 4.50445 19.0317 4.89647 19.1108C5.28849 19.19 5.6952 19.1509 6.06499 18.9986C6.43477 18.8463 6.75099 18.5876 6.97351 18.2553C7.19603 17.9229 7.31483 17.532 7.31485 17.1321C7.31608 16.868 7.26522 16.6062 7.16518 16.3617C7.06515 16.1172 6.91789 15.8949 6.73184 15.7074C6.5458 15.5199 6.3246 15.3709 6.08092 15.269C5.83725 15.167 5.57586 15.1142 5.31172 15.1133ZM5.31172 17.9008C5.15905 17.9039 5.00891 17.8615 4.88045 17.7789C4.75199 17.6964 4.65103 17.5774 4.59045 17.4373C4.52986 17.2971 4.51239 17.1421 4.54026 16.9919C4.56814 16.8418 4.64009 16.7034 4.74695 16.5943C4.85382 16.4852 4.99075 16.4104 5.14028 16.3795C5.28981 16.3485 5.44518 16.3628 5.58656 16.4205C5.72794 16.4782 5.84894 16.5767 5.93412 16.7034C6.0193 16.8302 6.06481 16.9794 6.06484 17.1321C6.06651 17.3338 5.9882 17.5279 5.84705 17.672C5.70589 17.8161 5.51341 17.8984 5.31172 17.9008Z"></path>
<path d="M12.9484 15.1133C12.5485 15.1102 12.1567 15.226 11.8227 15.4459C11.4886 15.6659 11.2274 15.9801 11.0723 16.3487C10.9171 16.7173 10.8748 17.1236 10.951 17.5163C11.0271 17.9089 11.2181 18.2701 11.4998 18.5539C11.7815 18.8378 12.1412 19.0317 12.5332 19.1108C12.9252 19.19 13.3319 19.1509 13.7017 18.9986C14.0715 18.8463 14.3877 18.5876 14.6102 18.2553C14.8327 17.9229 14.9516 17.532 14.9516 17.1321C14.9532 16.5989 14.7432 16.0868 14.3676 15.7083C13.9921 15.3298 13.4816 15.1158 12.9484 15.1133ZM12.9484 17.9008C12.7958 17.9039 12.6456 17.8615 12.5172 17.7789C12.3887 17.6964 12.2878 17.5774 12.2272 17.4373C12.1666 17.2971 12.1491 17.1421 12.177 16.9919C12.2049 16.8418 12.2768 16.7034 12.3837 16.5943C12.4905 16.4852 12.6275 16.4104 12.777 16.3795C12.9265 16.3485 13.0819 16.3628 13.2233 16.4205C13.3647 16.4782 13.4857 16.5767 13.5708 16.7034C13.656 16.8302 13.7015 16.9794 13.7016 17.1321C13.7032 17.3338 13.6249 17.5279 13.4838 17.672C13.3426 17.8161 13.1501 17.8984 12.9484 17.9008Z"></path>
</svg>
</span>
Button With Icon
</a>
Secondary Semi Rounded Button With Icon
FREE
FREE
Secondary Semi Rounded Button With Icon<a href="javascript:void(0)" class="bg-secondary inline-flex items-center justify-center rounded-[5px] py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M18.0738 0.849609H16.0676C15.8171 0.850867 15.5754 0.942155 15.3867 1.10681C15.1979 1.27146 15.0747 1.4985 15.0394 1.74648L14.4769 5.80898H13.3957V3.40273C13.3933 3.16503 13.2982 2.93766 13.1307 2.76899C12.9632 2.60031 12.7365 2.50367 12.4988 2.49961H10.0801C10.0533 2.27727 9.94785 2.07185 9.78277 1.92052C9.61769 1.7692 9.40389 1.68196 9.18007 1.67461H6.45194C6.3269 1.67779 6.20376 1.70595 6.08977 1.75745C5.97578 1.80895 5.87325 1.88274 5.78821 1.97447C5.70318 2.0662 5.63736 2.17402 5.59464 2.29158C5.55191 2.40914 5.53315 2.53406 5.53944 2.65898V3.32461H3.14882C2.91201 3.32126 2.68348 3.41171 2.51312 3.57622C2.34275 3.74073 2.24437 3.96595 2.23944 4.20273V5.81211C2.09795 5.81502 1.95882 5.84901 1.83192 5.91165C1.70501 5.97429 1.59343 6.06406 1.50507 6.17461C1.41421 6.29057 1.35071 6.42556 1.31933 6.5695C1.28794 6.71343 1.28948 6.8626 1.32382 7.00586C1.32248 7.02146 1.32248 7.03714 1.32382 7.05273L3.23632 12.9371C3.29128 13.1429 3.41335 13.3244 3.58318 13.4529C3.753 13.5814 3.96087 13.6495 4.17382 13.6465H13.3863C13.7359 13.6461 14.0736 13.5193 14.3372 13.2896C14.6008 13.0599 14.7725 12.7428 14.8207 12.3965L16.2488 2.09961H18.0707C18.2365 2.09961 18.3954 2.03376 18.5126 1.91655C18.6298 1.79934 18.6957 1.64037 18.6957 1.47461C18.6957 1.30885 18.6298 1.14988 18.5126 1.03267C18.3954 0.915457 18.2365 0.849609 18.0707 0.849609H18.0738ZM12.1363 5.79336H10.0926V3.74961H12.1457L12.1363 5.79336ZM6.78944 2.91523H8.84257V3.39961V5.79023H6.78944V2.91523ZM3.48944 4.56523H5.53944V5.79336H3.48944V4.56523ZM13.5832 12.2246C13.5771 12.2724 13.5537 12.3163 13.5174 12.3479C13.4811 12.3796 13.4345 12.3969 13.3863 12.3965H4.37382L2.65194 7.04961H14.3019L13.5832 12.2246Z"></path>
<path d="M5.31172 15.1133C4.9118 15.1102 4.51997 15.226 4.18594 15.4459C3.85191 15.6659 3.59073 15.9801 3.43553 16.3487C3.28034 16.7173 3.23813 17.1236 3.31425 17.5163C3.39037 17.9089 3.58139 18.2701 3.86309 18.5539C4.14478 18.8378 4.50445 19.0317 4.89647 19.1108C5.28849 19.19 5.6952 19.1509 6.06499 18.9986C6.43477 18.8463 6.75099 18.5876 6.97351 18.2553C7.19603 17.9229 7.31483 17.532 7.31485 17.1321C7.31608 16.868 7.26522 16.6062 7.16518 16.3617C7.06515 16.1172 6.91789 15.8949 6.73184 15.7074C6.5458 15.5199 6.3246 15.3709 6.08092 15.269C5.83725 15.167 5.57586 15.1142 5.31172 15.1133ZM5.31172 17.9008C5.15905 17.9039 5.00891 17.8615 4.88045 17.7789C4.75199 17.6964 4.65103 17.5774 4.59045 17.4373C4.52986 17.2971 4.51239 17.1421 4.54026 16.9919C4.56814 16.8418 4.64009 16.7034 4.74695 16.5943C4.85382 16.4852 4.99075 16.4104 5.14028 16.3795C5.28981 16.3485 5.44518 16.3628 5.58656 16.4205C5.72794 16.4782 5.84894 16.5767 5.93412 16.7034C6.0193 16.8302 6.06481 16.9794 6.06484 17.1321C6.06651 17.3338 5.9882 17.5279 5.84705 17.672C5.70589 17.8161 5.51341 17.8984 5.31172 17.9008Z"></path>
<path d="M12.9484 15.1133C12.5485 15.1102 12.1567 15.226 11.8227 15.4459C11.4886 15.6659 11.2274 15.9801 11.0723 16.3487C10.9171 16.7173 10.8748 17.1236 10.951 17.5163C11.0271 17.9089 11.2181 18.2701 11.4998 18.5539C11.7815 18.8378 12.1412 19.0317 12.5332 19.1108C12.9252 19.19 13.3319 19.1509 13.7017 18.9986C14.0715 18.8463 14.3877 18.5876 14.6102 18.2553C14.8327 17.9229 14.9516 17.532 14.9516 17.1321C14.9532 16.5989 14.7432 16.0868 14.3676 15.7083C13.9921 15.3298 13.4816 15.1158 12.9484 15.1133ZM12.9484 17.9008C12.7958 17.9039 12.6456 17.8615 12.5172 17.7789C12.3887 17.6964 12.2878 17.5774 12.2272 17.4373C12.1666 17.2971 12.1491 17.1421 12.177 16.9919C12.2049 16.8418 12.2768 16.7034 12.3837 16.5943C12.4905 16.4852 12.6275 16.4104 12.777 16.3795C12.9265 16.3485 13.0819 16.3628 13.2233 16.4205C13.3647 16.4782 13.4857 16.5767 13.5708 16.7034C13.656 16.8302 13.7015 16.9794 13.7016 17.1321C13.7032 17.3338 13.6249 17.5279 13.4838 17.672C13.3426 17.8161 13.1501 17.8984 12.9484 17.9008Z"></path>
</svg>
</span>
Button With Icon
</a>
Dark Semi Rounded Button With Icon
FREE
FREE
Dark Semi Rounded Button With Icon<a href="javascript:void(0)" class="inline-flex items-center justify-center rounded-[5px] bg-black py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M18.0738 0.849609H16.0676C15.8171 0.850867 15.5754 0.942155 15.3867 1.10681C15.1979 1.27146 15.0747 1.4985 15.0394 1.74648L14.4769 5.80898H13.3957V3.40273C13.3933 3.16503 13.2982 2.93766 13.1307 2.76899C12.9632 2.60031 12.7365 2.50367 12.4988 2.49961H10.0801C10.0533 2.27727 9.94785 2.07185 9.78277 1.92052C9.61769 1.7692 9.40389 1.68196 9.18007 1.67461H6.45194C6.3269 1.67779 6.20376 1.70595 6.08977 1.75745C5.97578 1.80895 5.87325 1.88274 5.78821 1.97447C5.70318 2.0662 5.63736 2.17402 5.59464 2.29158C5.55191 2.40914 5.53315 2.53406 5.53944 2.65898V3.32461H3.14882C2.91201 3.32126 2.68348 3.41171 2.51312 3.57622C2.34275 3.74073 2.24437 3.96595 2.23944 4.20273V5.81211C2.09795 5.81502 1.95882 5.84901 1.83192 5.91165C1.70501 5.97429 1.59343 6.06406 1.50507 6.17461C1.41421 6.29057 1.35071 6.42556 1.31933 6.5695C1.28794 6.71343 1.28948 6.8626 1.32382 7.00586C1.32248 7.02146 1.32248 7.03714 1.32382 7.05273L3.23632 12.9371C3.29128 13.1429 3.41335 13.3244 3.58318 13.4529C3.753 13.5814 3.96087 13.6495 4.17382 13.6465H13.3863C13.7359 13.6461 14.0736 13.5193 14.3372 13.2896C14.6008 13.0599 14.7725 12.7428 14.8207 12.3965L16.2488 2.09961H18.0707C18.2365 2.09961 18.3954 2.03376 18.5126 1.91655C18.6298 1.79934 18.6957 1.64037 18.6957 1.47461C18.6957 1.30885 18.6298 1.14988 18.5126 1.03267C18.3954 0.915457 18.2365 0.849609 18.0707 0.849609H18.0738ZM12.1363 5.79336H10.0926V3.74961H12.1457L12.1363 5.79336ZM6.78944 2.91523H8.84257V3.39961V5.79023H6.78944V2.91523ZM3.48944 4.56523H5.53944V5.79336H3.48944V4.56523ZM13.5832 12.2246C13.5771 12.2724 13.5537 12.3163 13.5174 12.3479C13.4811 12.3796 13.4345 12.3969 13.3863 12.3965H4.37382L2.65194 7.04961H14.3019L13.5832 12.2246Z"></path>
<path d="M5.31172 15.1133C4.9118 15.1102 4.51997 15.226 4.18594 15.4459C3.85191 15.6659 3.59073 15.9801 3.43553 16.3487C3.28034 16.7173 3.23813 17.1236 3.31425 17.5163C3.39037 17.9089 3.58139 18.2701 3.86309 18.5539C4.14478 18.8378 4.50445 19.0317 4.89647 19.1108C5.28849 19.19 5.6952 19.1509 6.06499 18.9986C6.43477 18.8463 6.75099 18.5876 6.97351 18.2553C7.19603 17.9229 7.31483 17.532 7.31485 17.1321C7.31608 16.868 7.26522 16.6062 7.16518 16.3617C7.06515 16.1172 6.91789 15.8949 6.73184 15.7074C6.5458 15.5199 6.3246 15.3709 6.08092 15.269C5.83725 15.167 5.57586 15.1142 5.31172 15.1133ZM5.31172 17.9008C5.15905 17.9039 5.00891 17.8615 4.88045 17.7789C4.75199 17.6964 4.65103 17.5774 4.59045 17.4373C4.52986 17.2971 4.51239 17.1421 4.54026 16.9919C4.56814 16.8418 4.64009 16.7034 4.74695 16.5943C4.85382 16.4852 4.99075 16.4104 5.14028 16.3795C5.28981 16.3485 5.44518 16.3628 5.58656 16.4205C5.72794 16.4782 5.84894 16.5767 5.93412 16.7034C6.0193 16.8302 6.06481 16.9794 6.06484 17.1321C6.06651 17.3338 5.9882 17.5279 5.84705 17.672C5.70589 17.8161 5.51341 17.8984 5.31172 17.9008Z"></path>
<path d="M12.9484 15.1133C12.5485 15.1102 12.1567 15.226 11.8227 15.4459C11.4886 15.6659 11.2274 15.9801 11.0723 16.3487C10.9171 16.7173 10.8748 17.1236 10.951 17.5163C11.0271 17.9089 11.2181 18.2701 11.4998 18.5539C11.7815 18.8378 12.1412 19.0317 12.5332 19.1108C12.9252 19.19 13.3319 19.1509 13.7017 18.9986C14.0715 18.8463 14.3877 18.5876 14.6102 18.2553C14.8327 17.9229 14.9516 17.532 14.9516 17.1321C14.9532 16.5989 14.7432 16.0868 14.3676 15.7083C13.9921 15.3298 13.4816 15.1158 12.9484 15.1133ZM12.9484 17.9008C12.7958 17.9039 12.6456 17.8615 12.5172 17.7789C12.3887 17.6964 12.2878 17.5774 12.2272 17.4373C12.1666 17.2971 12.1491 17.1421 12.177 16.9919C12.2049 16.8418 12.2768 16.7034 12.3837 16.5943C12.4905 16.4852 12.6275 16.4104 12.777 16.3795C12.9265 16.3485 13.0819 16.3628 13.2233 16.4205C13.3647 16.4782 13.4857 16.5767 13.5708 16.7034C13.656 16.8302 13.7015 16.9794 13.7016 17.1321C13.7032 17.3338 13.6249 17.5279 13.4838 17.672C13.3426 17.8161 13.1501 17.8984 12.9484 17.9008Z"></path>
</svg>
</span>
Button With Icon
</a>
Primary Semi Rounded Outline Button With Icon
FREE
FREE
Primary Semi Rounded Outline Button With Icon<a href="javascript:void(0)" class="text-primary hover:bg-primary border-primary inline-flex items-center justify-center rounded-[5px] border bg-transparent py-3 px-6 text-center text-base font-medium hover:text-white">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M18.0738 0.849609H16.0676C15.8171 0.850867 15.5754 0.942155 15.3867 1.10681C15.1979 1.27146 15.0747 1.4985 15.0394 1.74648L14.4769 5.80898H13.3957V3.40273C13.3933 3.16503 13.2982 2.93766 13.1307 2.76899C12.9632 2.60031 12.7365 2.50367 12.4988 2.49961H10.0801C10.0533 2.27727 9.94785 2.07185 9.78277 1.92052C9.61769 1.7692 9.40389 1.68196 9.18007 1.67461H6.45194C6.3269 1.67779 6.20376 1.70595 6.08977 1.75745C5.97578 1.80895 5.87325 1.88274 5.78821 1.97447C5.70318 2.0662 5.63736 2.17402 5.59464 2.29158C5.55191 2.40914 5.53315 2.53406 5.53944 2.65898V3.32461H3.14882C2.91201 3.32126 2.68348 3.41171 2.51312 3.57622C2.34275 3.74073 2.24437 3.96595 2.23944 4.20273V5.81211C2.09795 5.81502 1.95882 5.84901 1.83192 5.91165C1.70501 5.97429 1.59343 6.06406 1.50507 6.17461C1.41421 6.29057 1.35071 6.42556 1.31933 6.5695C1.28794 6.71343 1.28948 6.8626 1.32382 7.00586C1.32248 7.02146 1.32248 7.03714 1.32382 7.05273L3.23632 12.9371C3.29128 13.1429 3.41335 13.3244 3.58318 13.4529C3.753 13.5814 3.96087 13.6495 4.17382 13.6465H13.3863C13.7359 13.6461 14.0736 13.5193 14.3372 13.2896C14.6008 13.0599 14.7725 12.7428 14.8207 12.3965L16.2488 2.09961H18.0707C18.2365 2.09961 18.3954 2.03376 18.5126 1.91655C18.6298 1.79934 18.6957 1.64037 18.6957 1.47461C18.6957 1.30885 18.6298 1.14988 18.5126 1.03267C18.3954 0.915457 18.2365 0.849609 18.0707 0.849609H18.0738ZM12.1363 5.79336H10.0926V3.74961H12.1457L12.1363 5.79336ZM6.78944 2.91523H8.84257V3.39961V5.79023H6.78944V2.91523ZM3.48944 4.56523H5.53944V5.79336H3.48944V4.56523ZM13.5832 12.2246C13.5771 12.2724 13.5537 12.3163 13.5174 12.3479C13.4811 12.3796 13.4345 12.3969 13.3863 12.3965H4.37382L2.65194 7.04961H14.3019L13.5832 12.2246Z"></path>
<path d="M5.31172 15.1133C4.9118 15.1102 4.51997 15.226 4.18594 15.4459C3.85191 15.6659 3.59073 15.9801 3.43553 16.3487C3.28034 16.7173 3.23813 17.1236 3.31425 17.5163C3.39037 17.9089 3.58139 18.2701 3.86309 18.5539C4.14478 18.8378 4.50445 19.0317 4.89647 19.1108C5.28849 19.19 5.6952 19.1509 6.06499 18.9986C6.43477 18.8463 6.75099 18.5876 6.97351 18.2553C7.19603 17.9229 7.31483 17.532 7.31485 17.1321C7.31608 16.868 7.26522 16.6062 7.16518 16.3617C7.06515 16.1172 6.91789 15.8949 6.73184 15.7074C6.5458 15.5199 6.3246 15.3709 6.08092 15.269C5.83725 15.167 5.57586 15.1142 5.31172 15.1133ZM5.31172 17.9008C5.15905 17.9039 5.00891 17.8615 4.88045 17.7789C4.75199 17.6964 4.65103 17.5774 4.59045 17.4373C4.52986 17.2971 4.51239 17.1421 4.54026 16.9919C4.56814 16.8418 4.64009 16.7034 4.74695 16.5943C4.85382 16.4852 4.99075 16.4104 5.14028 16.3795C5.28981 16.3485 5.44518 16.3628 5.58656 16.4205C5.72794 16.4782 5.84894 16.5767 5.93412 16.7034C6.0193 16.8302 6.06481 16.9794 6.06484 17.1321C6.06651 17.3338 5.9882 17.5279 5.84705 17.672C5.70589 17.8161 5.51341 17.8984 5.31172 17.9008Z"></path>
<path d="M12.9484 15.1133C12.5485 15.1102 12.1567 15.226 11.8227 15.4459C11.4886 15.6659 11.2274 15.9801 11.0723 16.3487C10.9171 16.7173 10.8748 17.1236 10.951 17.5163C11.0271 17.9089 11.2181 18.2701 11.4998 18.5539C11.7815 18.8378 12.1412 19.0317 12.5332 19.1108C12.9252 19.19 13.3319 19.1509 13.7017 18.9986C14.0715 18.8463 14.3877 18.5876 14.6102 18.2553C14.8327 17.9229 14.9516 17.532 14.9516 17.1321C14.9532 16.5989 14.7432 16.0868 14.3676 15.7083C13.9921 15.3298 13.4816 15.1158 12.9484 15.1133ZM12.9484 17.9008C12.7958 17.9039 12.6456 17.8615 12.5172 17.7789C12.3887 17.6964 12.2878 17.5774 12.2272 17.4373C12.1666 17.2971 12.1491 17.1421 12.177 16.9919C12.2049 16.8418 12.2768 16.7034 12.3837 16.5943C12.4905 16.4852 12.6275 16.4104 12.777 16.3795C12.9265 16.3485 13.0819 16.3628 13.2233 16.4205C13.3647 16.4782 13.4857 16.5767 13.5708 16.7034C13.656 16.8302 13.7015 16.9794 13.7016 17.1321C13.7032 17.3338 13.6249 17.5279 13.4838 17.672C13.3426 17.8161 13.1501 17.8984 12.9484 17.9008Z"></path>
</svg>
</span>
Button With Icon
</a>
White Square Button With Icon
FREE
FREE
White Square Button With Icon<a href="javascript:void(0)" class="text-body-color shadow-card hover:text-primary inline-flex items-center justify-center bg-white py-3 px-6 text-center text-base font-medium">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.5312 5.90625H16.4062C16.5312 5.625 16.625 5.3125 16.625 4.96875V3.75C16.625 2.5625 15.6562 1.5625 14.4375 1.5625H2.5C1.3125 1.5625 0.3125 2.53125 0.3125 3.75V4.375V4.96875V16.2188C0.3125 17.4062 1.28125 18.375 2.46875 18.375H17.5312C18.7188 18.375 19.6875 17.4062 19.6875 16.2188V8.0625C19.6875 6.875 18.7188 5.90625 17.5312 5.90625ZM18.4375 14H15.375C15.1875 14 15.0312 13.8438 15.0312 13.6562V10.6562C15.0312 10.4687 15.1875 10.3125 15.375 10.3125H18.4375V14ZM1.5625 3.78125C1.5625 3.28125 1.96875 2.84375 2.5 2.84375H14.4688C14.9688 2.84375 15.4062 3.25 15.4062 3.78125V5C15.4062 5.5 15 5.9375 14.4688 5.9375H7.53125H2.5C2 5.9375 1.5625 5.53125 1.5625 5V4.375V3.78125ZM17.5312 17.1562H2.46875C1.96875 17.1562 1.5625 16.75 1.5625 16.25V6.9375C1.84375 7.0625 2.15625 7.15625 2.5 7.15625H7.5625H14.4688H17.5625C18.0625 7.15625 18.4688 7.5625 18.4688 8.0625V9.03125H15.4062C14.5312 9.03125 13.8125 9.75 13.8125 10.625V13.625C13.8125 14.5 14.5312 15.2188 15.4062 15.2188H18.4375V16.25C18.4375 16.75 18.0312 17.1562 17.5312 17.1562Z"></path>
<path d="M16.8125 12.7812C17.1577 12.7812 17.4375 12.5014 17.4375 12.1562C17.4375 11.8111 17.1577 11.5312 16.8125 11.5312C16.4673 11.5312 16.1875 11.8111 16.1875 12.1562C16.1875 12.5014 16.4673 12.7812 16.8125 12.7812Z"></path>
</svg>
</span>
Button With Icon
</a>
White Semi Rounded Button With Icon
FREE
FREE
White Semi Rounded Button With Icon<a href="javascript:void(0)" class="text-body-color shadow-card hover:text-primary inline-flex items-center justify-center rounded-[5px] bg-white py-3 px-6 text-center text-base font-medium">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.5312 5.90625H16.4062C16.5312 5.625 16.625 5.3125 16.625 4.96875V3.75C16.625 2.5625 15.6562 1.5625 14.4375 1.5625H2.5C1.3125 1.5625 0.3125 2.53125 0.3125 3.75V4.375V4.96875V16.2188C0.3125 17.4062 1.28125 18.375 2.46875 18.375H17.5312C18.7188 18.375 19.6875 17.4062 19.6875 16.2188V8.0625C19.6875 6.875 18.7188 5.90625 17.5312 5.90625ZM18.4375 14H15.375C15.1875 14 15.0312 13.8438 15.0312 13.6562V10.6562C15.0312 10.4687 15.1875 10.3125 15.375 10.3125H18.4375V14ZM1.5625 3.78125C1.5625 3.28125 1.96875 2.84375 2.5 2.84375H14.4688C14.9688 2.84375 15.4062 3.25 15.4062 3.78125V5C15.4062 5.5 15 5.9375 14.4688 5.9375H7.53125H2.5C2 5.9375 1.5625 5.53125 1.5625 5V4.375V3.78125ZM17.5312 17.1562H2.46875C1.96875 17.1562 1.5625 16.75 1.5625 16.25V6.9375C1.84375 7.0625 2.15625 7.15625 2.5 7.15625H7.5625H14.4688H17.5625C18.0625 7.15625 18.4688 7.5625 18.4688 8.0625V9.03125H15.4062C14.5312 9.03125 13.8125 9.75 13.8125 10.625V13.625C13.8125 14.5 14.5312 15.2188 15.4062 15.2188H18.4375V16.25C18.4375 16.75 18.0312 17.1562 17.5312 17.1562Z"></path>
<path d="M16.8125 12.7812C17.1577 12.7812 17.4375 12.5014 17.4375 12.1562C17.4375 11.8111 17.1577 11.5312 16.8125 11.5312C16.4673 11.5312 16.1875 11.8111 16.1875 12.1562C16.1875 12.5014 16.4673 12.7812 16.8125 12.7812Z"></path>
</svg>
</span>
Button With Icon
</a>
Dark Full Rounded Button With Icon
FREE
FREE
Dark Full Rounded Button With Icon<a href="javascript:void(0)" class="inline-flex items-center justify-center rounded-full bg-black py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<g clip-path="url(#clip0_3182_775)">
<path d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"></path>
</g>
<defs>
<clipPath id="clip0_3182_775">
<rect width="20" height="20"></rect>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</a>
Primary Square Outline Button With Icon
FREE
FREE
Primary Square Outline Button With Icon<a href="javascript:void(0)" class="text-primary hover:bg-primary border-primary inline-flex items-center justify-center border bg-transparent py-3 px-6 text-center text-base font-medium hover:text-white">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.8125 16.6652H2.1875C1.69022 16.6652 1.21331 16.4677 0.861675 16.1161C0.510044 15.7644 0.3125 15.2875 0.3125 14.7902V5.20898C0.3125 4.7117 0.510044 4.23479 0.861675 3.88316C1.21331 3.53153 1.69022 3.33398 2.1875 3.33398H17.8125C18.3098 3.33398 18.7867 3.53153 19.1383 3.88316C19.49 4.23479 19.6875 4.7117 19.6875 5.20898V14.7902C19.6875 15.2875 19.49 15.7644 19.1383 16.1161C18.7867 16.4677 18.3098 16.6652 17.8125 16.6652ZM2.1875 4.58398C2.02174 4.58398 1.86277 4.64983 1.74556 4.76704C1.62835 4.88425 1.5625 5.04322 1.5625 5.20898V14.7902C1.5625 14.956 1.62835 15.115 1.74556 15.2322C1.86277 15.3494 2.02174 15.4152 2.1875 15.4152H17.8125C17.9783 15.4152 18.1372 15.3494 18.2544 15.2322C18.3717 15.115 18.4375 14.956 18.4375 14.7902V5.20898C18.4375 5.04322 18.3717 4.88425 18.2544 4.76704C18.1372 4.64983 17.9783 4.58398 17.8125 4.58398H2.1875Z"></path>
<path d="M10.0016 10.643C9.63422 10.643 9.27406 10.5413 8.96093 10.3493L0.889055 5.44927C0.746501 5.36308 0.644027 5.22378 0.604175 5.06203C0.584443 4.98194 0.580678 4.89875 0.593097 4.8172C0.605516 4.73566 0.633875 4.65736 0.676555 4.58677C0.719234 4.51619 0.775399 4.4547 0.841842 4.40582C0.908284 4.35694 0.983704 4.32163 1.06379 4.30189C1.22554 4.26204 1.3965 4.28808 1.53905 4.37427L9.61093 9.28052C9.72906 9.35258 9.86475 9.3907 10.0031 9.3907C10.1415 9.3907 10.2772 9.35258 10.3953 9.28052L18.4641 4.37427C18.5342 4.33159 18.6121 4.30315 18.6933 4.29058C18.7745 4.278 18.8573 4.28154 18.9371 4.30098C19.0169 4.32042 19.0921 4.35539 19.1584 4.40389C19.2247 4.45239 19.2808 4.51347 19.3234 4.58365C19.3661 4.65382 19.3945 4.73172 19.4071 4.81288C19.4197 4.89405 19.4162 4.9769 19.3967 5.0567C19.3773 5.1365 19.3423 5.21169 19.2938 5.27797C19.2453 5.34426 19.1842 5.40034 19.1141 5.44302L11.0422 10.3493C10.7291 10.5413 10.3689 10.643 10.0016 10.643Z"></path>
</svg>
</span>
Button With Icon
</a>
Primary Full Rounded Outline Button With Icon
FREE
FREE
Primary Full Rounded Outline Button With Icon<a href="javascript:void(0)" class="text-primary hover:bg-primary border-primary inline-flex items-center justify-center rounded-full border bg-transparent py-3 px-6 text-center text-base font-medium hover:text-white">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<g clip-path="url(#clip0_3182_775)">
<path d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"></path>
</g>
<defs>
<clipPath id="clip0_3182_775">
<rect width="20" height="20"></rect>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</a>
White Square Outline Button With Icon
FREE
FREE
White Square Outline Button With Icon<a href="javascript:void(0)" class="text-body-color border-stroke hover:border-primary hover:text-primary inline-flex items-center justify-center border bg-white py-3 px-6 text-center text-base font-medium">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.5312 5.90625H16.4062C16.5312 5.625 16.625 5.3125 16.625 4.96875V3.75C16.625 2.5625 15.6562 1.5625 14.4375 1.5625H2.5C1.3125 1.5625 0.3125 2.53125 0.3125 3.75V4.375V4.96875V16.2188C0.3125 17.4062 1.28125 18.375 2.46875 18.375H17.5312C18.7188 18.375 19.6875 17.4062 19.6875 16.2188V8.0625C19.6875 6.875 18.7188 5.90625 17.5312 5.90625ZM18.4375 14H15.375C15.1875 14 15.0312 13.8438 15.0312 13.6562V10.6562C15.0312 10.4687 15.1875 10.3125 15.375 10.3125H18.4375V14ZM1.5625 3.78125C1.5625 3.28125 1.96875 2.84375 2.5 2.84375H14.4688C14.9688 2.84375 15.4062 3.25 15.4062 3.78125V5C15.4062 5.5 15 5.9375 14.4688 5.9375H7.53125H2.5C2 5.9375 1.5625 5.53125 1.5625 5V4.375V3.78125ZM17.5312 17.1562H2.46875C1.96875 17.1562 1.5625 16.75 1.5625 16.25V6.9375C1.84375 7.0625 2.15625 7.15625 2.5 7.15625H7.5625H14.4688H17.5625C18.0625 7.15625 18.4688 7.5625 18.4688 8.0625V9.03125H15.4062C14.5312 9.03125 13.8125 9.75 13.8125 10.625V13.625C13.8125 14.5 14.5312 15.2188 15.4062 15.2188H18.4375V16.25C18.4375 16.75 18.0312 17.1562 17.5312 17.1562Z"></path>
<path d="M16.8125 12.7812C17.1577 12.7812 17.4375 12.5014 17.4375 12.1562C17.4375 11.8111 17.1577 11.5312 16.8125 11.5312C16.4673 11.5312 16.1875 11.8111 16.1875 12.1562C16.1875 12.5014 16.4673 12.7812 16.8125 12.7812Z"></path>
</svg>
</span>
Button With Icon
</a>
Primary Square Button With Icon
FREE
FREE
Primary Square Button With Icon<a href="javascript:void(0)" class="bg-primary inline-flex items-center justify-center py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.8125 16.6652H2.1875C1.69022 16.6652 1.21331 16.4677 0.861675 16.1161C0.510044 15.7644 0.3125 15.2875 0.3125 14.7902V5.20898C0.3125 4.7117 0.510044 4.23479 0.861675 3.88316C1.21331 3.53153 1.69022 3.33398 2.1875 3.33398H17.8125C18.3098 3.33398 18.7867 3.53153 19.1383 3.88316C19.49 4.23479 19.6875 4.7117 19.6875 5.20898V14.7902C19.6875 15.2875 19.49 15.7644 19.1383 16.1161C18.7867 16.4677 18.3098 16.6652 17.8125 16.6652ZM2.1875 4.58398C2.02174 4.58398 1.86277 4.64983 1.74556 4.76704C1.62835 4.88425 1.5625 5.04322 1.5625 5.20898V14.7902C1.5625 14.956 1.62835 15.115 1.74556 15.2322C1.86277 15.3494 2.02174 15.4152 2.1875 15.4152H17.8125C17.9783 15.4152 18.1372 15.3494 18.2544 15.2322C18.3717 15.115 18.4375 14.956 18.4375 14.7902V5.20898C18.4375 5.04322 18.3717 4.88425 18.2544 4.76704C18.1372 4.64983 17.9783 4.58398 17.8125 4.58398H2.1875Z" fill="white"></path>
<path d="M10.0016 10.643C9.63422 10.643 9.27406 10.5413 8.96093 10.3493L0.889055 5.44927C0.746501 5.36308 0.644027 5.22378 0.604175 5.06203C0.584443 4.98194 0.580678 4.89875 0.593097 4.8172C0.605516 4.73566 0.633875 4.65736 0.676555 4.58677C0.719234 4.51619 0.775399 4.4547 0.841842 4.40582C0.908284 4.35694 0.983704 4.32163 1.06379 4.30189C1.22554 4.26204 1.3965 4.28808 1.53905 4.37427L9.61093 9.28052C9.72906 9.35258 9.86475 9.3907 10.0031 9.3907C10.1415 9.3907 10.2772 9.35258 10.3953 9.28052L18.4641 4.37427C18.5342 4.33159 18.6121 4.30315 18.6933 4.29058C18.7745 4.278 18.8573 4.28154 18.9371 4.30098C19.0169 4.32042 19.0921 4.35539 19.1584 4.40389C19.2247 4.45239 19.2808 4.51347 19.3234 4.58365C19.3661 4.65382 19.3945 4.73172 19.4071 4.81288C19.4197 4.89405 19.4162 4.9769 19.3967 5.0567C19.3773 5.1365 19.3423 5.21169 19.2938 5.27797C19.2453 5.34426 19.1842 5.40034 19.1141 5.44302L11.0422 10.3493C10.7291 10.5413 10.3689 10.643 10.0016 10.643Z" fill="white"></path>
</svg>
</span>
Button With Icon
</a>
Primary Full Rounded Button With Icon
FREE
FREE
Primary Full Rounded Button With Icon<a href="javascript:void(0)" class="bg-primary inline-flex items-center justify-center rounded-full py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<g clip-path="url(#clip0_3182_775)">
<path d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"></path>
</g>
<defs>
<clipPath id="clip0_3182_775">
<rect width="20" height="20"></rect>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</a>
Secondary Full Rounded Button With Icon
FREE
FREE
Secondary Full Rounded Button With Icon<a href="javascript:void(0)" class="bg-secondary inline-flex items-center justify-center rounded-full py-3 px-6 text-center text-base font-medium text-white hover:bg-opacity-90">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<g clip-path="url(#clip0_3182_775)">
<path d="M18.875 11.4375C18.3125 10.8438 17.5625 10.5312 16.75 10.5312C16.125 10.5312 15.5625 10.7188 15.0625 11.0938C15 11.125 14.9688 11.1562 14.9062 11.2188C14.8438 11.1875 14.8125 11.125 14.75 11.0938C14.25 10.7188 13.6875 10.5312 13.0625 10.5312C12.9062 10.5312 12.7812 10.5312 12.6562 10.5625C11.7188 9.5 10.5625 8.75 9.3125 8.40625C10.625 7.75 11.5312 6.40625 11.5312 4.875C11.5312 2.6875 9.75 0.9375 7.59375 0.9375C5.40625 0.9375 3.65625 2.71875 3.65625 4.875C3.65625 6.4375 4.5625 7.78125 5.875 8.40625C4.5625 8.78125 3.40625 9.53125 2.4375 10.6562C1.125 12.2188 0.375 14.4062 0.3125 16.7812C0.3125 17.0312 0.4375 17.25 0.65625 17.3438C1.5 17.75 4.4375 19.0938 7.59375 19.0938C9.28125 19.0938 10.8438 18.8125 10.9062 18.8125C11.25 18.75 11.4688 18.4375 11.4062 18.0938C11.3438 17.75 11.0312 17.5312 10.6875 17.5938C10.6875 17.5938 9.15625 17.875 7.59375 17.875C5.0625 17.8438 2.65625 16.875 1.5625 16.375C1.65625 14.4375 2.3125 12.7187 3.375 11.4375C4.46875 10.125 5.96875 9.40625 7.59375 9.40625C9.03125 9.40625 10.375 10 11.4375 11.0312C11.2812 11.1562 11.125 11.2812 11 11.4062C10.4688 11.9688 10.1875 12.75 10.1875 13.5938C10.1875 14.4375 10.5 15.2188 11.1562 16C11.6875 16.6562 12.4375 17.2812 13.2812 18L13.3125 18.0312C13.5937 18.25 13.9062 18.5312 14.2188 18.8125C14.4062 19 14.6875 19.0938 14.9375 19.0938C15.1875 19.0938 15.4687 19 15.6562 18.8125C16 18.5312 16.3125 18.25 16.5938 18C17.4375 17.2812 18.1875 16.6562 18.7188 16C19.375 15.2188 19.6875 14.4375 19.6875 13.5938C19.6875 12.7812 19.4062 12.0312 18.875 11.4375ZM4.875 4.875C4.875 3.375 6.09375 2.1875 7.5625 2.1875C9.0625 2.1875 10.25 3.40625 10.25 4.875C10.25 6.375 9.03125 7.5625 7.5625 7.5625C6.09375 7.5625 4.875 6.34375 4.875 4.875ZM17.75 15.2188C17.2812 15.7812 16.5938 16.375 15.7812 17.0625C15.5312 17.2812 15.2188 17.5312 14.9062 17.7812C14.625 17.5312 14.3438 17.2812 14.0938 17.0938L14.0625 17.0625C13.25 16.375 12.5625 15.7812 12.0938 15.2188C11.625 14.6562 11.4062 14.1562 11.4062 13.625C11.4062 13.0937 11.5938 12.625 11.9062 12.2812C12.2188 11.9375 12.6563 11.75 13.0938 11.75C13.4375 11.75 13.75 11.8438 14 12.0625C14.125 12.1562 14.2188 12.25 14.3125 12.375C14.5938 12.7188 15.1875 12.7188 15.5 12.375C15.5938 12.25 15.7187 12.1562 15.8125 12.0625C16.0937 11.8438 16.4062 11.75 16.7188 11.75C17.1875 11.75 17.5938 11.9375 17.9062 12.2812C18.2188 12.625 18.4062 13.0937 18.4062 13.625C18.4375 14.1875 18.2188 14.6562 17.75 15.2188Z"></path>
</g>
<defs>
<clipPath id="clip0_3182_775">
<rect width="20" height="20"></rect>
</clipPath>
</defs>
</svg>
</span>
Button With Icon
</a>
White Full Rounded Button With Icon
FREE
FREE
White Full Rounded Button With Icon<a href="javascript:void(0)" class="text-body-color shadow-card hover:text-primary inline-flex items-center justify-center rounded-full bg-white py-3 px-6 text-center text-base font-medium">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.5312 5.90625H16.4062C16.5312 5.625 16.625 5.3125 16.625 4.96875V3.75C16.625 2.5625 15.6562 1.5625 14.4375 1.5625H2.5C1.3125 1.5625 0.3125 2.53125 0.3125 3.75V4.375V4.96875V16.2188C0.3125 17.4062 1.28125 18.375 2.46875 18.375H17.5312C18.7188 18.375 19.6875 17.4062 19.6875 16.2188V8.0625C19.6875 6.875 18.7188 5.90625 17.5312 5.90625ZM18.4375 14H15.375C15.1875 14 15.0312 13.8438 15.0312 13.6562V10.6562C15.0312 10.4687 15.1875 10.3125 15.375 10.3125H18.4375V14ZM1.5625 3.78125C1.5625 3.28125 1.96875 2.84375 2.5 2.84375H14.4688C14.9688 2.84375 15.4062 3.25 15.4062 3.78125V5C15.4062 5.5 15 5.9375 14.4688 5.9375H7.53125H2.5C2 5.9375 1.5625 5.53125 1.5625 5V4.375V3.78125ZM17.5312 17.1562H2.46875C1.96875 17.1562 1.5625 16.75 1.5625 16.25V6.9375C1.84375 7.0625 2.15625 7.15625 2.5 7.15625H7.5625H14.4688H17.5625C18.0625 7.15625 18.4688 7.5625 18.4688 8.0625V9.03125H15.4062C14.5312 9.03125 13.8125 9.75 13.8125 10.625V13.625C13.8125 14.5 14.5312 15.2188 15.4062 15.2188H18.4375V16.25C18.4375 16.75 18.0312 17.1562 17.5312 17.1562Z"></path>
<path d="M16.8125 12.7812C17.1577 12.7812 17.4375 12.5014 17.4375 12.1562C17.4375 11.8111 17.1577 11.5312 16.8125 11.5312C16.4673 11.5312 16.1875 11.8111 16.1875 12.1562C16.1875 12.5014 16.4673 12.7812 16.8125 12.7812Z"></path>
</svg>
</span>
Button With Icon
</a>
White Semi Rounded Outline Button With Icon
FREE
FREE
White Semi Rounded Outline Button With Icon<a href="javascript:void(0)" class="text-body-color border-stroke hover:border-primary hover:text-primary inline-flex items-center justify-center rounded-[5px] border bg-white py-3 px-6 text-center text-base font-medium">
<span class="mr-[10px]">
<svg width="20" height="20" viewBox="0 0 20 20" class="fill-current">
<path d="M17.5312 5.90625H16.4062C16.5312 5.625 16.625 5.3125 16.625 4.96875V3.75C16.625 2.5625 15.6562 1.5625 14.4375 1.5625H2.5C1.3125 1.5625 0.3125 2.53125 0.3125 3.75V4.375V4.96875V16.2188C0.3125 17.4062 1.28125 18.375 2.46875 18.375H17.5312C18.7188 18.375 19.6875 17.4062 19.6875 16.2188V8.0625C19.6875 6.875 18.7188 5.90625 17.5312 5.90625ZM18.4375 14H15.375C15.1875 14 15.0312 13.8438 15.0312 13.6562V10.6562C15.0312 10.4687 15.1875 10.3125 15.375 10.3125H18.4375V14ZM1.5625 3.78125C1.5625 3.28125 1.96875 2.84375 2.5 2.84375H14.4688C14.9688 2.84375 15.4062 3.25 15.4062 3.78125V5C15.4062 5.5 15 5.9375 14.4688 5.9375H7.53125H2.5C2 5.9375 1.5625 5.53125 1.5625 5V4.375V3.78125ZM17.5312 17.1562H2.46875C1.96875 17.1562 1.5625 16.75 1.5625 16.25V6.9375C1.84375 7.0625 2.15625 7.15625 2.5 7.15625H7.5625H14.4688H17.5625C18.0625 7.15625 18.4688 7.5625 18.4688 8.0625V9.03125H15.4062C14.5312 9.03125 13.8125 9.75 13.8125 10.625V13.625C13.8125 14.5 14.5312 15.2188 15.4062 15.2188H18.4375V16.25C18.4375 16.75 18.0312 17.1562 17.5312 17.1562Z"></path>
<path d="M16.8125 12.7812C17.1577 12.7812 17.4375 12.5014 17.4375 12.1562C17.4375 11.8111 17.1577 11.5312 16.8125 11.5312C16.4673 11.5312 16.1875 11.8111 16.1875 12.1562C16.1875 12.5014 16.4673 12.7812 16.8125 12.7812Z"></path>
</svg>
</span>
Button With Icon
</a>
White Full Rounded Outline Button With Icon
FREE