Switch by catraco
#e8e8e8
1.switch-name { 2 --dark-sky: #5050e5; 3 --moon: #ffd365; 4 --light-sky: #35d5e5; 5 --sun: #ffed89; 6 display: inline-block; 7 position: relative; 8 border-radius: 5em; 9 cursor: pointer; 10 width: 80px; 11 height: 40px; 12 overflow: hidden; 13 transition: all .5s; 14} 15 16.switch-name .back { 17 background-color: var(--dark-sky); 18 position: absolute; 19 width: 100%; 20 height: 100%; 21 left: 0; 22 top: 0; 23 transition: .5s ease-in-out; 24} 25 26.switch-name .checkbox { 27 opacity: 0; 28} 29 30.switch-name .checkbox:checked ~ .back { 31 background-color: var(--light-sky); 32} 33 34.switch-name .checkbox:checked ~ .moon { 35 transform: translate(100%) rotate(180deg); 36 opacity: 0; 37} 38 39.switch-name .checkbox:checked ~ .sun { 40 transform: translate(100%) rotate(180deg); 41 opacity: 1; 42} 43 44.switch-name .moon { 45 position: absolute; 46 left: 0; 47 top: 0; 48 height: 100%; 49 padding: .4em; 50 fill: var(--moon); 51 transition: .5s; 52} 53 54.switch-name .sun { 55 position: absolute; 56 left: 0; 57 top: 0; 58 height: 100%; 59 padding: .4em; 60 fill: var(--sun); 61 transition: .5s; 62 opacity: 0; 63}
1.4K views
1.4K views
MIT License