mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
29 lines
No EOL
1.2 KiB
HTML
29 lines
No EOL
1.2 KiB
HTML
<!-- From Uiverse.io by Itskrish01 - Website: https://devdojo.com/tailwindcss/buttons - Name: devdojo - Tags: button, tailwind -->
|
|
<button
|
|
class="relative flex items-center px-6 py-3 overflow-hidden font-medium transition-all bg-indigo-500 rounded-md group"
|
|
>
|
|
<span
|
|
class="absolute top-0 right-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-indigo-700 rounded group-hover:-mr-4 group-hover:-mt-4"
|
|
>
|
|
<span
|
|
class="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white"
|
|
></span>
|
|
</span>
|
|
<span
|
|
class="absolute bottom-0 rotate-180 left-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-indigo-700 rounded group-hover:-ml-4 group-hover:-mb-4"
|
|
>
|
|
<span
|
|
class="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white"
|
|
></span>
|
|
</span>
|
|
<span
|
|
class="absolute bottom-0 left-0 w-full h-full transition-all duration-500 ease-in-out delay-200 -translate-x-full bg-indigo-600 rounded-md group-hover:translate-x-0"
|
|
></span>
|
|
<span
|
|
class="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-white"
|
|
>Get Started</span
|
|
>
|
|
</button>
|
|
|
|
|
|
|