Buttons | Shubh0408 clever cobra 74

Buttonsclever cobra1 个文件更新于 2026-04-06
html公开前 25 行,完整代码需登录
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<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

登录后可以查看完整源码、在线编辑并实时预览运行效果。