#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 100px; 7 height: 2em; 8} 9 10 11/* The slider */ 12.slider { 13 position: absolute; 14 cursor: pointer; 15 top: 0; 16 left: 0; 17 right: 0; 18 bottom: 0; 19 background-color: #fff; 20 color: #000; 21 font-weight: 600; 22 border-radius: 30px; 23 display: flex; 24 justify-content: space-around; 25 align-items: center; 26 transition: .4s; 27} 28 29.slider:before { 30 position: absolute; 31 content: "On"; 32 height: 90%; 33 width: 48%; 34 left: 2%; 35 border-radius: 20px; 36 background-color: white; 37 color: green; 38 display: grid; 39 align-content: center; 40 justify-content: center; 41 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1); 42 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); 43 transition: .4s; 44} 45 46.slider:after { 47 content: ""; 48 position: absolute; 49 top: -7px; 50 left: -7px; 51 right: -7px; 52 bottom: -7px; 53 border-radius: 1.71em; 54 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1)); 55 z-index: -1; 56} 57 58.switch input:checked + .slider { 59 background-color: #21f3a3; 60 color: #fff; 61} 62 63.switch input:checked + .slider:before { 64 content: "Off"; 65 transform: translateX(100%); 66 color: red; 67} 68 69.switch input { 70 display: none; 71}
Comments
MIT License