mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
26 lines
No EOL
928 B
HTML
26 lines
No EOL
928 B
HTML
<!-- From Uiverse.io by AKAspidey01 - Tags: simple, animation, button, #button, tailwind, button hover effect -->
|
||
<button
|
||
class="relative border-2 border-black group hover:border-green-500 w-12 h-12 duration-500 overflow-hidden"
|
||
type="button"
|
||
>
|
||
<p
|
||
class="font-Manrope text-3xl h-full w-full flex items-center justify-center text-black duration-500 relative z-10 group-hover:scale-0"
|
||
>
|
||
×
|
||
</p>
|
||
<span
|
||
class="absolute w-full h-full bg-green-500 rotate-45 group-hover:top-9 duration-500 top-12 left-0"
|
||
></span>
|
||
<span
|
||
class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:left-9 duration-500 left-12"
|
||
></span>
|
||
<span
|
||
class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:right-9 duration-500 right-12"
|
||
></span>
|
||
<span
|
||
class="absolute w-full h-full bg-green-500 rotate-45 group-hover:bottom-9 duration-500 bottom-12 right-0"
|
||
></span>
|
||
</button>
|
||
|
||
|
||
|