![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by Shubh0408
#e8e8e8
HTML +TailwindCSS
1<button class="cursor-pointer"> 2 <label class="flex justify-center items-center"> 3 <div class="w-fit p-1 m-2 rounded-md border shadow-2xl"> 4 <div 5 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" 6 > 7 <input type="checkbox" class="peer hidden" /> 8 <span 9 class="absolute -top-5 left-[1.2rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[100ms]" 10 >S</span 11 > 12 <span 13 class="absolute -top-5 left-[1.7rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[200ms]" 14 >u</span 15 > 16 <span 17 class="absolute -top-5 left-[2.25rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[250ms]" 18 >b</span 19 > 20 <span 21 class="absolute -top-5 left-[2.8rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]" 22 >m</span 23 > 24 <span 25 class="absolute -top-5 left-[3.65rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[300ms]" 26 >i</span 27 > 28 <span 29 class="absolute -top-5 left-[4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]" 30 >t</span 31 > 32 <span 33 class="absolute -top-5 left-[4.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[400ms]" 34 >t</span 35 > 36 <span 37 class="absolute -top-5 left-[4.9rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[450ms]" 38 >e</span 39 > 40 <span 41 class="absolute -top-5 left-[5.4rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[500ms]" 42 >d</span 43 > 44 <svg 45 width="19" 46 height="19" 47 viewBox="0 0 0.6 0.6" 48 fill="none" 49 class="peer-checked:translate-x-24 peer-checked:rotate-45 duration-1000 fill-black peer-checked:fill-green-700 mr-1" 50 > 51 <path 52 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" 53 ></path> 54 <path 55 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" 56 ></path> 57 </svg> 58 <span class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[0ms]" 59 >S</span 60 > 61 <span 62 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[50ms]" 63 >e</span 64 > 65 <span 66 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[100ms]" 67 >n</span 68 > 69 <span 70 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[150ms]" 71 >d</span 72 > 73 <span 74 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[250ms]" 75 > </span 76 > 77 <span 78 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[300ms]" 79 >M</span 80 > 81 <span 82 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[350ms]" 83 >e</span 84 > 85 <span 86 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[400ms]" 87 >s</span 88 > 89 <span 90 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[450ms]" 91 >s</span 92 > 93 <span 94 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[500ms]" 95 >a</span 96 > 97 <span 98 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[550ms]" 99 >g</span 100 > 101 <span 102 class="delay-1000 peer-checked:opacity-0 peer-checked:delay-[600ms]" 103 >e</span 104 > 105 </div> 106 </div> 107 </label> 108</button> 109
46 views
46 views
MIT License