类型：组件 · 分类：按钮 · 收录：2026-09-19 · 源码：会员可见
[hidecontent type="vip1"]<!-- 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>