mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
58 lines
No EOL
1.6 KiB
HTML
58 lines
No EOL
1.6 KiB
HTML
<input id="checkboxInput" type="checkbox" />
|
|
<label class="toggleSwitch" for="checkboxInput">
|
|
<svg
|
|
class="slider"
|
|
viewBox="0 0 512 512"
|
|
height="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"
|
|
></path>
|
|
</svg>
|
|
</label>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: slider, animation, switch, toggle, click effect */
|
|
/* To hide the checkbox */
|
|
#checkboxInput {
|
|
display: none;
|
|
}
|
|
|
|
.toggleSwitch {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 50px;
|
|
height: 30px;
|
|
background-color: rgb(112, 112, 112);
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.slider {
|
|
height: 20px;
|
|
position: absolute;
|
|
left: 5px;
|
|
border-radius: 50%;
|
|
transition-duration: 0.2s;
|
|
border: 3px solid rgb(71, 71, 71);
|
|
background-color: rgb(71, 71, 71);
|
|
fill: rgb(255, 129, 129);
|
|
}
|
|
|
|
#checkboxInput:checked + .toggleSwitch .slider {
|
|
transform: translateX(100%);
|
|
transition-duration: 0.2s;
|
|
fill: rgb(94, 255, 1);
|
|
}
|
|
/* Switch background change */
|
|
#checkboxInput:checked + .toggleSwitch {
|
|
/* background-color: rgb(148, 118, 255); */
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
</style>
|
|
|