mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
22 lines
No EOL
1 KiB
HTML
22 lines
No EOL
1 KiB
HTML
<!-- From Uiverse.io by Javierrocadev - Tags: purple, button, hover, hover effect, hoverme, hover button, tailwind -->
|
|
<button
|
|
class="overflow-hidden relative w-32 p-2 h-12 bg-black text-white border-none rounded-md text-xl font-bold cursor-pointer relative z-10 group"
|
|
>
|
|
Hover me!
|
|
<span
|
|
class="absolute w-36 h-32 -top-8 -left-2 bg-white rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-500 duration-1000 origin-left"
|
|
></span>
|
|
<span
|
|
class="absolute w-36 h-32 -top-8 -left-2 bg-purple-400 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-700 duration-700 origin-left"
|
|
></span>
|
|
<span
|
|
class="absolute w-36 h-32 -top-8 -left-2 bg-purple-600 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-1000 duration-500 origin-left"
|
|
></span>
|
|
<span
|
|
class="group-hover:opacity-100 group-hover:duration-1000 duration-100 opacity-0 absolute top-2.5 left-6 z-10"
|
|
>Explore!</span
|
|
>
|
|
</button>
|
|
|
|
|
|
|