mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
41 lines
927 B
HTML
41 lines
927 B
HTML
<label for="check">
|
|
<input checked="" id="check" type="checkbox">
|
|
<div class="check-bg">
|
|
<span class="check-span"></span>
|
|
</div>
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by ICe1BotMaker - Tags: switch, modern, toggle switch */
|
|
label[for="check"] input {
|
|
display: none;
|
|
}
|
|
|
|
label[for="check"] .check-bg {
|
|
width: 50px;
|
|
padding: 2.5px;
|
|
background: whitesmoke;
|
|
border-radius: 100px;
|
|
border: 1px solid rgb(228, 228, 228);
|
|
transition: background .1s, border .1s;
|
|
}
|
|
|
|
label[for="check"] .check-span {
|
|
display: block;
|
|
background: rgb(219, 219, 219);
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 100%;
|
|
transition: background .1s, border .1s, margin-left .325s;
|
|
}
|
|
|
|
label[for="check"] input:checked ~ .check-bg {
|
|
background: rgb(81, 107, 255);
|
|
border: 1px solid rgb(68, 90, 216);
|
|
}
|
|
|
|
label[for="check"] input:checked ~ .check-bg .check-span {
|
|
background: white;
|
|
border: 0;
|
|
margin-left: 18px;
|
|
}
|
|
</style>
|