DotNet NoteBook

<label class="switch"> <input type="checkbox"> <div> <span></span> </div> </label> <label class="switch"> <input type="checkbox" checked> <div> <span></span> </div> </label> .switch { --line: #E8EBFB; --dot: #275EFE; --circle: #D3D4EC; --background: #fff; --duration: .3s; --text: #9EA0BE; --shadow: 0 1px 3px #{rgba(#00093D, .08)}; cursor: pointer; position: relative; &:before { content: ''; width: 60px; height: 32px; border-radius: 16px; background: var(--background); position: absolute; left: 0; top: 0; box-shadow: var(--shadow); } input { display: none; & + div { position: relative; &:before, &:after { --s: 1; content: ''; position: absolute; height: 4px; top: 14px; width: 24px; background: var(--line); transform: scaleX(var(--s)); transition: transform var(--duration) ease; } &:before { --s: 0; left: 4px; transform-origin: 0 50%; border-radius: 2px 0 0 2px; } &:after { left: 32px; transform-origin: 100% 50%; border-radius: 0 2px 2px 0; } span { padding-left: 60px; line-height: 28px; color: var(--text); &:before { --x: 0; --b: var(--circle); --s: 4px; content: ''; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 var(--s) var(--b); transform: translateX(var(--x)); transition: box-shadow var(--duration) ease, transform var(--duration) ease; } &:not(:empty) { padding-left: 68px; } } } &:checked { & + div { &:before { --s: 1; } &:after { --s: 0; } span { &:before { --x: 28px; --s: 12px; --b: var(--dot); } } } } } } // Center & dribbble body { min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; background: #E8EBFB; .switch { & + .switch { margin-top: 32px; } } .dribbble { position: fixed; display: block; right: 20px; bottom: 20px; img { display: block; height: 28px; } } }