mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
55 lines
1.4 KiB
HTML
55 lines
1.4 KiB
HTML
<input type="checkbox" name="check-toggle" id="checkbox" hidden="">
|
|
<label for="checkbox" class="toggle">
|
|
G
|
|
<div class="toggle__switch">
|
|
<div class="toggle__circle"></div>
|
|
</div>
|
|
D
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by Creatlydev - Tags: switch, toggle, creative, html, css, toggle switch */
|
|
.toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .2rem;
|
|
font-weight: 900;
|
|
font-size: 4rem;
|
|
color: hsl(119, 84%, 10%);
|
|
text-shadow: 0 0 2px #e8e8e8;
|
|
}
|
|
|
|
.toggle__switch {
|
|
--bg-toggle: hsl(0, 0%, 100%);
|
|
--bg-circle: hsl(119, 84%, 10%);
|
|
--w-toggle-switch: 150px;
|
|
--w-h-toggle-circle: 35px;
|
|
--pd-toggle-switch: .5rem;
|
|
height: 55px;
|
|
width: var(--w-toggle-switch);
|
|
background-color: var(--bg-toggle);
|
|
border-radius: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 var(--pd-toggle-switch);
|
|
cursor: pointer;
|
|
transition: background-color 500ms;
|
|
}
|
|
|
|
.toggle__circle {
|
|
width: var(--w-h-toggle-circle);
|
|
height: var(--w-h-toggle-circle);
|
|
background-color: var(--bg-circle);
|
|
border-radius: 50%;
|
|
transition: margin 400ms ease-in-out, background-color 1000ms;
|
|
}
|
|
|
|
#checkbox:checked + .toggle .toggle__circle {
|
|
margin-left: calc(var(--w-toggle-switch) - (var(--pd-toggle-switch) * 2) - var(--w-h-toggle-circle));
|
|
}
|
|
|
|
#checkbox:checked + .toggle > .toggle__switch {
|
|
--bg-toggle: hsl(119, 84%, 10%);
|
|
--bg-circle: hsl(0, 0%, 96%);
|
|
box-shadow: 0 .3rem 5rem 0 hsla(96, 85%, 34%, 30%);
|
|
}
|
|
</style>
|