mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
39 lines
728 B
HTML
39 lines
728 B
HTML
<label class="switch">
|
|
<input type="checkbox" checked="">
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by nikk7007 - Tags: switch */
|
|
.switch {
|
|
--false: #E81B1B;
|
|
--true: #009068;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
appearance: none;
|
|
height: 2rem;
|
|
width: 3.5rem;
|
|
background-color: #fff;
|
|
position: relative;
|
|
border-radius: .2em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=checkbox]::before {
|
|
content: '';
|
|
display: block;
|
|
height: 1.9em;
|
|
width: 1.9em;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(1.9em/2 + .3em);
|
|
background-color: var(--false);
|
|
border-radius: .2em;
|
|
transition: .3s ease;
|
|
}
|
|
|
|
input[type=checkbox]:checked::before {
|
|
background-color: var(--true);
|
|
left: calc(100% - (1.9em/2 + .3em));
|
|
}
|
|
</style>
|