mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
<input id="checkbox" type="checkbox">
|
|
<label class="switch" for="checkbox">
|
|
<svg viewBox="0 0 448 512" class="svg"><path d="M320 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM125.7 175.5c9.9-9.9 23.4-15.5 37.5-15.5c1.9 0 3.8 .1 5.6 .3L137.6 254c-9.3 28 1.7 58.8 26.8 74.5l86.2 53.9-25.4 88.8c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l28.7-100.4c5.9-20.6-2.6-42.6-20.7-53.9L238 299l30.9-82.4 5.1 12.3C289 264.7 323.9 288 362.7 288H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H362.7c-12.9 0-24.6-7.8-29.5-19.7l-6.3-15c-14.6-35.1-44.1-61.9-80.5-73.1l-48.7-15c-11.1-3.4-22.7-5.2-34.4-5.2c-31 0-60.8 12.3-82.7 34.3L57.4 153.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l23.1-23.1zM91.2 352H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h69.6c19 0 36.2-11.2 43.9-28.5L157 361.6l-9.5-6c-17.5-10.9-30.5-26.8-37.9-44.9L91.2 352z"></path></svg>Start
|
|
</label>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: switch */
|
|
#checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
width: 90px;
|
|
height: 90px;
|
|
background-color: rgb(99, 99, 99);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
font-size: 0.9em;
|
|
font-weight: 700;
|
|
color: rgb(37, 37, 37);
|
|
border: 2px solid rgb(126, 126, 126);
|
|
box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
|
|
}
|
|
|
|
.svg {
|
|
position: relative;
|
|
width: 30%;
|
|
height: 30%;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.svg path {
|
|
fill: rgb(37, 37, 37);
|
|
}
|
|
|
|
#checkbox:checked + .switch .svg {
|
|
filter: drop-shadow(0px 0px 3px rgb(222, 151, 255));
|
|
}
|
|
|
|
#checkbox:checked + .switch .svg path {
|
|
fill: rgb(255, 255, 255);
|
|
}
|
|
|
|
#checkbox:checked + .switch {
|
|
box-shadow: 0px 0px 1px rgb(222, 151, 255) inset,
|
|
0px 0px 2px rgb(222, 151, 255) inset,
|
|
0px 0px 10px rgb(222, 151, 255) inset,
|
|
0px 0px 40px rgb(222, 151, 255),
|
|
0px 0px 100px rgb(222, 151, 255),
|
|
0px 0px 5px rgb(222, 151, 255);
|
|
border: 2px solid rgb(255, 255, 255);
|
|
background-color: rgb(152, 107, 172);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
|
|
</style>
|