mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
112 lines
No EOL
4.2 KiB
HTML
112 lines
No EOL
4.2 KiB
HTML
<!-- From Uiverse.io by Shubh0408 - Tags: button, tailwindbutton, tailwindcss -->
|
|
<button class="cursor-pointer">
|
|
<label class="flex justify-center items-center">
|
|
<div class="w-fit p-1 m-2 rounded-md border shadow-2xl">
|
|
<div
|
|
class="relative rounded-full shadow-[0px_3px_10px_0px_rgba(156,156,156,0.75)_inset] hover:shadow-[0px_-3px_10px_0px_rgba(156,156,156,0.75)_inset] px-4 py-2 duration-700 flex justify-center items-center overflow-hidden"
|
|
>
|
|
<input type="checkbox" class="peer hidden" />
|
|
<span
|
|
class="absolute -top-5 left-[1.2rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[100ms]"
|
|
>S</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[1.7rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[200ms]"
|
|
>u</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[2.25rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[250ms]"
|
|
>b</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[2.8rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]"
|
|
>m</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[3.65rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[300ms]"
|
|
>i</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]"
|
|
>t</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[4.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[400ms]"
|
|
>t</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[4.9rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[450ms]"
|
|
>e</span
|
|
>
|
|
<span
|
|
class="absolute -top-5 left-[5.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[500ms]"
|
|
>d</span
|
|
>
|
|
<svg
|
|
width="19"
|
|
height="19"
|
|
viewBox="0 0 0.6 0.6"
|
|
fill="none"
|
|
class="peer-checked:translate-x-24 peer-checked:rotate-45 duration-1000 fill-black peer-checked:fill-green-700 mr-1"
|
|
>
|
|
<path
|
|
d="M.356.541C.327.541.285.52.252.421L.234.367.18.349C.081.316.06.274.06.245S.081.174.18.141L.392.07Q.473.043.517.084C.561.125.55.155.532.209L.461.421c-.033.1-.075.12-.104.12M.191.176C.122.199.097.227.097.245s.025.046.094.069l.063.021q.009.003.012.012L.287.41C.31.479.338.504.356.504S.402.479.425.41L.496.198Q.516.138.49.112C.464.086.442.094.404.106z"
|
|
></path>
|
|
<path
|
|
d="M.253.36A.02.02 0 0 1 .24.354a.02.02 0 0 1 0-.027l.09-.09C.337.23.349.23.357.237s.007.019 0 .027l-.09.09A.02.02 0 0 1 .254.36"
|
|
></path>
|
|
</svg>
|
|
<span class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[0ms]"
|
|
>S</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[50ms]"
|
|
>e</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[100ms]"
|
|
>n</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[150ms]"
|
|
>d</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[250ms]"
|
|
> </span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[300ms]"
|
|
>M</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[350ms]"
|
|
>e</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[400ms]"
|
|
>s</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[450ms]"
|
|
>s</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[500ms]"
|
|
>a</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[550ms]"
|
|
>g</span
|
|
>
|
|
<span
|
|
class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[600ms]"
|
|
>e</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</button>
|
|
|
|
|
|
|