3.1K views
1.l { 2 display: block; 3 margin-bottom: 1.5em; 4 font-size: 1em; 5} 6 7.l { 8 background-color: rgba(0,0,0,0.7); 9 border-radius: 0.75em; 10 box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset; 11 color: #fdea7b; 12 display: inline-flex; 13 align-items: center; 14 margin: auto; 15 padding: 0.15em; 16 width: 3em; 17 height: 1.5em; 18 transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out; 19 -webkit-appearance: none; 20 -moz-appearance: none; 21 appearance: none; 22} 23 24.l:before, .l:after { 25 content: ""; 26 display: block; 27} 28 29.l:before { 30 background-color: #d7d7d7; 31 border-radius: 50%; 32 width: 1.2em; 33 height: 1.2em; 34 transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out; 35 z-index: 1; 36} 37 38.l:after { 39 background: linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%, 40 repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%, 41 radial-gradient(circle at 50% 50%,#888 25%, transparent 26%); 42 background-repeat: no-repeat; 43 border: 0.25em solid transparent; 44 border-left: 0.4em solid #d8d8d8; 45 border-right: 0 solid transparent; 46 transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out; 47 transform: translateX(-22.5%); 48 transform-origin: 25% 50%; 49 width: 1.2em; 50 height: 1em; 51 box-sizing: border-box; 52} 53/* Checked */ 54.l:checked { 55 background-color: rgba(0,0,0,0.45); 56 box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset; 57} 58 59.l:checked:before { 60 background-color: currentColor; 61 transform: translateX(125%) 62} 63 64.l:checked:after { 65 border-left-color: currentColor; 66 transform: translateX(-2.5%) rotateY(180deg); 67} 68/* Other States */ 69.l:focus { 70 /* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */ 71 outline: 0; 72}
JkHuger
JkHuger
MIT License