truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend style fix

Browse Source
This commit is contained in:
Ümit Tunç
2026-01-01 16:25:27 +03:00
parent e8cdba4fd3
commit 0ca75829bb
454 changed files with 10087 additions and 9940 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/elements/buttons.html
+85 -85
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,16 +647,16 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#colors">Colors</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#gradients">Gradients</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#sizes">Sizes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#shapes">Shapes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#style">Style</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#circle">Circle</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#social">Social</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#icon">Icon</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#expand">Expand</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#play">Play</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#colors">Colors</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#gradients">Gradients</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#sizes">Sizes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#shapes">Shapes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#style">Style</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#circle">Circle</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#social">Social</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#icon">Icon</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#expand">Expand</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#play">Play</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -675,7 +675,7 @@
<a href="#" class="btn btn-pink !text-white !bg-[#d16b86] border-[#d16b86] hover:text-white hover:bg-[#d16b86] hover:!border-[#d16b86] active:text-white active:bg-[#d16b86] active:border-[#d16b86] disabled:text-white disabled:bg-[#d16b86] disabled:border-[#d16b86] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-violet !text-white !bg-[#a07cc5] border-[#a07cc5] hover:text-white hover:bg-[#a07cc5] hover:!border-[#a07cc5] active:text-white active:bg-[#a07cc5] active:border-[#a07cc5] disabled:text-white disabled:bg-[#a07cc5] disabled:border-[#a07cc5] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-blue !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-blue !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-leaf !text-white !bg-[#7cb798] border-[#7cb798] hover:text-white hover:bg-[#7cb798] hover:!border-[#7cb798] focus:shadow-[rgba(113,165,142,1)] active:text-white active:bg-[#7cb798] active:border-[#7cb798] disabled:text-white disabled:bg-[#7cb798] disabled:border-[#7cb798] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
@@ -716,7 +716,7 @@
&#60;a href="#" class="btn btn-pink !text-white !bg-[#d16b86] border-[#d16b86] hover:text-white hover:bg-[#d16b86] hover:!border-[#d16b86] active:text-white active:bg-[#d16b86] active:border-[#d16b86] disabled:text-white disabled:bg-[#d16b86] disabled:border-[#d16b86] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-violet !text-white !bg-[#a07cc5] border-[#a07cc5] hover:text-white hover:bg-[#a07cc5] hover:!border-[#a07cc5] active:text-white active:bg-[#a07cc5] active:border-[#a07cc5] disabled:text-white disabled:bg-[#a07cc5] disabled:border-[#a07cc5] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-blue !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-blue !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-leaf !text-white !bg-[#7cb798] border-[#7cb798] hover:text-white hover:bg-[#7cb798] hover:!border-[#7cb798] focus:shadow-[rgba(113,165,142,1)] active:text-white active:bg-[#7cb798] active:border-[#7cb798] disabled:text-white disabled:bg-[#7cb798] disabled:border-[#7cb798] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
@@ -808,9 +808,9 @@
<h2 class="!mb-5 !leading-[1.35]">Sizes</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Large Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Default Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Small Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Large Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Default Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Small Button</a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -820,9 +820,9 @@
<div id="collapse-sizes" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg !rounded-[50rem]"&gt;Large Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"&gt;Default Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm !rounded-[50rem]"&gt;Small Button&lt;/a&gt;</code></pre>
<pre class="language-html"><code>&lt;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg !rounded-[50rem]"&gt;Large Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]"&gt;Default Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm !rounded-[50rem]"&gt;Small Button&lt;/a&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -837,10 +837,10 @@
<h2 class="!mb-5 !leading-[1.35]">Shapes</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-none !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Square</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounded</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[0.8rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounder</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Pill</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-none !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Square</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounded</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.8rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounder</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Pill</a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -850,10 +850,10 @@
<div id="collapse-shapes" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-none&quot;&gt;Square&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-none&quot;&gt;Square&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Rounded&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[0.8rem]&quot;&gt;Rounder&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]&quot;&gt;Pill&lt;/a&gt;</code></pre>
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.8rem]&quot;&gt;Rounder&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]&quot;&gt;Pill&lt;/a&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -868,7 +868,7 @@
<h2 class="!mb-5 !leading-[1.35]">Style</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Solid</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Solid</a>
<a href="#" class="btn btn-soft-primary !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Soft</a>
<a href="#" class="btn btn-outline-primary !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Outline</a>
<a href="#" class="btn btn-gradient gradient-1 !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Gradient</a>
@@ -882,7 +882,7 @@
<div id="collapse-styles" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]&quot;&gt;Solid&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]&quot;&gt;Solid&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-soft-primary !rounded-[50rem]&quot;&gt;Soft&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-outline-primary !rounded-[50rem]&quot;&gt;Outline&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-gradient gradient-1 !rounded-[50rem] !mr-1 !mb-2 md:!mb-0&quot;&gt;Gradient&lt;/a&gt;
@@ -901,9 +901,9 @@
<h2 class="!mb-5 !leading-[1.35]">Circle</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg xl:!text-[1.3rem] w-[3rem] h-[3rem] !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] w-[2.2rem] h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm w-[1.8rem] h-[1.8rem] !inline-flex !items-center !justify-center !text-[.8rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg xl:!text-[1.3rem] w-[3rem] h-[3rem] !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] w-[2.2rem] h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm w-[1.8rem] h-[1.8rem] !inline-flex !items-center !justify-center !text-[.8rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-lg xl:!text-[1.3rem] w-[3rem] h-[3rem] !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary w-[2.2rem] h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-sm w-[1.8rem] h-[1.8rem] !inline-flex !items-center !justify-center !text-[.8rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
@@ -926,9 +926,9 @@
<div id="collapse-circle" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-soft-primary btn-lg&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-soft-primary&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
@@ -1025,8 +1025,8 @@
<h2 class="!mb-5 !leading-[1.35]">Icon</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-start rounded !mr-2"><i class="uil uil-apple !mr-[.3rem] before:content-['\e938']"></i> App Store</a>
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-end rounded">Google Play <i class="uil uil-google-play !mr-[.3rem] before:content-['\eb4f']"></i></a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-start rounded !mr-2"><i class="uil uil-apple !mr-[.3rem] before:content-['\e938']"></i> App Store</a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-end rounded">Google Play <i class="uil uil-google-play !mr-[.3rem] before:content-['\eb4f']"></i></a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -1036,11 +1036,11 @@
<div id="collapse-icon" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-start rounded&quot;&gt;
<pre class="language-html"><code>&lt;a class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-start rounded&quot;&gt;
&lt;i class=&quot;uil uil-apple&quot;&gt;&lt;/i&gt; App Store
&lt;/a&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-end rounded&quot;&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-end rounded&quot;&gt;
Google Play &lt;i class=&quot;uil uil-google-play&quot;&gt;&lt;/i&gt;
&lt;/a&gt;</code></pre>
</div>
@@ -1056,7 +1056,7 @@
<h2 class="!mb-5 !leading-[1.35]">Expand</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-expand btn-primary !text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>
<a href="#" class="btn btn-expand btn-primary !text-white bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>
<br class="xl:!hidden lg:!hidden">
<a href="#" class="btn btn-expand btn-soft-primary !rounded-[50rem] !mr-5"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>
</div>
@@ -1069,7 +1069,7 @@
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>
&#60;a href="#" class="btn btn-expand btn-primary !text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c']"&#62;&#60;/i&#62;&#60;span&#62;Learn More&#60;/span&#62;&#60;/a&#62;
&#60;a href="#" class="btn btn-expand btn-primary !text-white bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c']"&#62;&#60;/i&#62;&#60;span&#62;Learn More&#60;/span&#62;&#60;/a&#62;
&#60;br class="xl:!hidden lg:!hidden"&#62;
&#60;a href="#" class="btn btn-expand btn-soft-primary !rounded-[50rem] !mr-5"&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c']"&#62;&#60;/i&#62;&#60;span&#62;Learn More&#60;/span&#62;&#60;/a&#62;</code></pre>
</div>
@@ -1085,7 +1085,7 @@
<h2 class="!mb-5 !leading-[1.35]">Play</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e31e24] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e31e24] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-play ripple xl:!text-[2.3rem] w-[3.5rem] h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e0e9fa] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e0e9fa] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>
</div>
<!--/.card-body -->
@@ -1096,7 +1096,7 @@
<div id="collapse-play" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]"&gt;&lt;i class="icn-caret-right"&gt;&lt;/i&gt;&lt;/a&gt;
<pre class="language-html"><code>&lt;a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e31e24] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e31e24] after:[animation-delay:.5s]"&gt;&lt;i class="icn-caret-right"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href="#" class="btn btn-circle btn-soft-primary btn-play ripple xl:!text-[2.3rem] w-[3.5rem] h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e0e9fa] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e0e9fa] after:[animation-delay:.5s]"&gt;&lt;i class="icn-caret-right"&gt;&lt;/i&gt;&lt;/a&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
@@ -1131,9 +1131,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>