Switch by Creatlydev
#e8e8e8
1.toggle { 2 display: flex; 3 align-items: center; 4 gap: .2rem; 5 font-weight: 900; 6 font-size: 4rem; 7 color: hsl(119, 84%, 10%); 8 text-shadow: 0 0 2px #e8e8e8; 9} 10 11.toggle__switch { 12 --bg-toggle: hsl(0, 0%, 100%); 13 --bg-circle: hsl(119, 84%, 10%); 14 --w-toggle-switch: 150px; 15 --w-h-toggle-circle: 35px; 16 --pd-toggle-switch: .5rem; 17 height: 55px; 18 width: var(--w-toggle-switch); 19 background-color: var(--bg-toggle); 20 border-radius: 4rem; 21 display: flex; 22 align-items: center; 23 padding: 0 var(--pd-toggle-switch); 24 cursor: pointer; 25 transition: background-color 500ms; 26} 27 28.toggle__circle { 29 width: var(--w-h-toggle-circle); 30 height: var(--w-h-toggle-circle); 31 background-color: var(--bg-circle); 32 border-radius: 50%; 33 transition: margin 400ms ease-in-out, background-color 1000ms; 34} 35 36#checkbox:checked + .toggle .toggle__circle { 37 margin-left: calc(var(--w-toggle-switch) - (var(--pd-toggle-switch) * 2) - var(--w-h-toggle-circle)); 38} 39 40#checkbox:checked + .toggle > .toggle__switch { 41 --bg-toggle: hsl(119, 84%, 10%); 42 --bg-circle: hsl(0, 0%, 96%); 43 box-shadow: 0 .3rem 5rem 0 hsla(96, 85%, 34%, 30%); 44}
767 views
767 views
MIT License