Public/galaxy
2
0
Fork 0
mirror of https://github.com/uiverse-io/galaxy.git synced 2025-11-28 05:00:22 +08:00
Code Issues Projects Releases Packages Wiki Activity
galaxy/Buttons/Praashoo7_black-bat-66.html

94 lines
No EOL
7.6 KiB
HTML
Raw Permalink Blame History

<!-- From Uiverse.io by Praashoo7 - Tags: gradient, button, star, moon, sun, space, cloud, earth -->
<div
class="flex items-center justify-center rounded-[25px] pointer-events-none w-[20.5em] h-[17em] bg-[#87ceeb] hover:bg-[#171717] active:bg-black transition duration-500 ease-in-out overflow-hidden"
>
<div class="group">
<button
class="relative z-[2] cursor-pointer top-[11.75em] left-[7em] pointer-events-auto w-[6em] h-[6em] rounded-full bg-gradient-to-br from-yellow-400 via-yellow-400 to-orange-500 hover:from-gray-400 hover:to-slate-200 transition duration-500 ease-in-out shadow-[0px_0px_100px_rgba(255,212,59,0.5),0px_0px_100px_rgba(255,102,0,0.5)] hover:shadow-[0px_0px_100px_rgba(233,233,233,0.5),0px_0px_100px_rgba(192,192,192,0.5);] hover:opacity-100 active:shadow-none"
>
<div
class="relative opacity-0 left-[65%] top-[25%] w-[1.1em] h-[1.1em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"
></div>
<div
class="relative opacity-0 left-[80%] top-[25%] w-[.45em] h-[.45em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"
></div>
<div
class="relative opacity-0 left-[65%] top-[20%] w-[.8em] h-[.8em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"
></div>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg4770"
viewBox="0 0 500.00001 500.00001"
height="141.11111mm"
width="141.11111mm"
class="relative w-[6em] h-[6em] bottom-[39%] opacity-0 shadow-none transition duration-500 ease-in-out group-active:opacity-100"
>
<defs id="defs4772"></defs>
<metadata id="metadata4775">image/svg+xml</metadata>
<g transform="translate(92.857148,-1130.9336)" id="layer1">
<g id="g5318" transform="translate(264.28569,744.28568)">
<ellipse
id="circle4657"
cy="636.64795"
cx="-107.1429"
style="fill:#178181;fill-opacity:1"
rx="249.99994"
ry="250"
></ellipse>
<path
id="path4659"
d="m 142.85704,636.64796 c 0,-50.15918 -14.76953,-96.86621 -40.20019,-136.01074 0,0 -14.261714,20.83398 -11.582027,34.22558 2.677734,13.39356 18.413077,14.41602 16.796867,24.24024 -1.61621,9.82422 -13.223625,-2.81153 -27.511708,23.0791 -14.287106,25.89258 -7.140623,61.61719 13.392575,64.29102 20.534173,2.67187 49.104483,-9.8252 49.104483,-9.8252 z"
style="fill:#2aa846;fill-opacity:1"
></path>
<path
id="path4661"
d="m -41.488621,395.3589 c 29.098626,7.89843 56.087877,20.92187 79.938457,38.03808 0,0 -28.9882739,-4.78125 -39.9697165,5.03711 -10.9804665,9.82129 -26.9951105,33.03907 -39.9697165,0 -12.972653,-33.03711 9.76e-4,-43.07519 9.76e-4,-43.07519 z"
style="fill:#2aa846;fill-opacity:1"
></path>
<path
id="path4663"
d="m -295.11258,471.82276 c 45.81835,-52.21191 113.04294,-85.1748 187.96968,-85.1748 0,0 -16.96093,10.26953 15.181635,27.67969 32.143547,17.41211 17.410152,25.44629 10.713865,30.80371 -6.695311,5.35742 -18.309566,-10.71387 -25.8955,-21.42676 -7.58691,-10.71582 -40.16796,-27.23144 -65.16991,-18.30078 -25.00097,8.93066 -46.42479,15.52734 -42.85643,23.83594 3.56738,8.30664 46.42479,-7.75879 62.49608,-6.87012 16.07128,0.89062 10.71386,10.70996 -4.46192,22.31836 -15.17773,11.6084 -16.96679,25.89258 -0.89453,34.82031 16.07031,8.93164 35.70898,9.8252 40.1787,4.46875 4.4668,-5.35742 -8.03613,-40.17871 22.322264,-25.00195 30.35839,15.17676 55.359361,24.1123 30.35839,46.43066 -25.001946,22.31641 -53.571274,47.3252 -54.465804,61.60547 -0.89453,14.28223 8.93164,25.89844 3.57422,26.78711 -5.35743,0.88867 -10.27442,-5.80176 -13.84375,-10.71582 -3.56738,-4.91113 -20.08886,-6.69434 -28.12402,-3.57227 -8.03613,3.12207 -23.21679,15.17676 -14.73242,26.78516 8.48535,11.61035 20.08301,6.24609 31.69336,11.60449 11.60839,5.35742 22.43358,25.74707 20.21093,30.35547 -2.22266,4.60645 -12.11816,-1.22656 -20.21093,-16.96191 -8.09473,-15.73731 -23.27637,-5.35742 -33.958,-8.03614 -10.68262,-2.67773 -18.71875,-4.46289 -29.43359,-23.21386 -10.71484,-18.74903 -32.89745,-23.9961 -41.9619,-34.82031 -25.96582,-31.00586 -24.1084,-54.46387 -29.46484,-65.17774 -5.35742,-10.7168 -19.22558,-28.22266 -19.22558,-28.22266 z"
style="fill:#2aa846;fill-opacity:1"
></path>
<path
id="path4665"
d="m -83.036462,640.22023 c 0,0 26.786126,2.67382 40.178701,14.28418 13.392575,11.60839 15.181637,16.07519 35.7158115,20.53808 20.5341745,4.46094 29.4648365,16.06543 16.0712852,38.38965 -13.3925749,22.32129 -37.5038967,58.03711 -49.1083867,68.75195 -11.603512,10.71582 -25.890618,19.64356 -31.248039,37.5 -5.356444,17.85449 -7.145506,28.5625 4.46289,35.71094 0,0 -6.246093,15.18066 -20.533198,-4.46289 -14.288082,-19.64551 -2.679687,-42.85645 0,-56.25 2.677733,-13.3916 9.819333,-53.56641 5.355467,-63.39258 -4.460936,-9.82324 -25.000969,-16.07519 -30.358389,-36.60742 -5.35742,-20.5332 4.01855,-60.49219 29.463858,-54.46191 z"
style="fill:#2aa846;fill-opacity:1"
></path>
<path
id="path4667"
d="m -283.92019,459.87256 c 97.63181,-97.63379 255.919848,-97.63184 353.552638,0 97.632792,97.62988 97.632792,255.91992 9.7e-4,353.55175 0,0 113.425772,-149.99023 -47.16111,-310.57714 C -138.11554,342.25927 -283.92019,459.87256 -283.92019,459.87256 Z"
style="opacity:0.36700056;fill:#414141;fill-opacity:1;enable-background:new"
></path>
</g>
</g>
</svg>
</button>
<div
class="relative blur-[0.5px] opacity-80 top-[2.4em] left-[-1em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"
></div>
<div
class="relative blur-[0.5px] opacity-80 opacity-100 top-[6em] left-[13em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"
></div>
<div
class="relative bottom-[6em] left-[0.15em] w-[20em] h-[17em] transition duration-500 ease-in-out opacity-0 group-hover:opacity-100 scale-[1.2] group-active:scale-[1.01]"
>
<div
class="animate-pulse w-[2px] h-[2px] bg-white rounded-full shadow-[220px_118px_#fff,280px_176px_#fff,40px_50px_#fff,60px_180px_#fff,200px_250px_#fff]"
></div>
<div
class="animate-[pulse_1s_infinite_100ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_170px_#fff,_180px_176px_#fff,_140px_45px_#fff,_10px_230px_#fff,_70px_120px_#fff,_170px_10px_#fff,_70px_70px_#fff]"
></div>
<div
class="animate-[pulse_1s_infinite_200ms] w-[2px] h-[2px] bg-white rounded-full shadow-[20px_130px_#fff,_300px_130px_#fff,_80px_20px_#fff,_190px_50px_#fff,_270px_20px_#fff,_240px_70px_#fff,_170px_210px_#fff]"
></div>
<div
class="animate-[pulse_1s_infinite_300ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_230px_#fff,_110px_80px_#fff,_280px_80px_#fff,_280px_230px_#fff,_220px_190px_#fff,_100px_200px_#fff,_250px_150px_#fff]"
></div>
</div>
</div>
</div>
Reference in a new issue View git blame Copy permalink