mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
7 lines
682 B
HTML
7 lines
682 B
HTML
<!-- From Uiverse.io by omriluz - Tags: animation, red, green, gradient, switch, toggle, gradients, tailwind -->
|
|
<label class="relative block aspect-[2/0.75] cursor-pointer w-20 rounded-full bg-gradient-to-r from-red-600 to-green-600 bg-[length:100%_100%] shadow-2xl shadow-purple-300 transition-all duration-500 [&:has(input:checked)]:rotate-180 hover:bg-[length:100%_500%] focus:bg-[length:100%_500%]">
|
|
<input type="checkbox" class="peer/input hidden">
|
|
<div class="absolute left-[3%] top-1/2 aspect-square h-[90%] -translate-y-1/2 rotate-180 rounded-full bg-white transition-all duration-500 peer-checked/input:left-[63%] peer-checked/input:-rotate-6"></div>
|
|
</label>
|
|
|
|
|