Switch by LeonKohli
#e8e8e8
1.toggle { 2 background-color: #fff; 3 width: 56px; 4 height: 56px; 5 border-radius: 50%; 6 display: grid; 7 place-items: center; 8 cursor: pointer; 9 box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.1); 10 line-height: 1; 11} 12 13.input { 14 display: none; 15} 16 17.icon { 18 grid-column: 1 / 1; 19 grid-row: 1 / 1; 20 transition: transform 500ms; 21} 22 23.icon--moon { 24 transition-delay: 200ms; 25} 26 27.icon--sun { 28 transform: scale(0); 29} 30 31#switch:checked + .icon--moon { 32 transform: rotate(360deg) scale(0); 33} 34 35#switch:checked ~ .icon--sun { 36 transition-delay: 200ms; 37 transform: scale(1) rotate(360deg); 38} 39 40.w-8 { 41 width: 2rem /* 32px */; 42} 43
524 views
Variation of aswitch
MIT License