2.6K views
1.switch-holder { 2 display: flex; 3 padding: 10px 20px; 4 border-radius: 10px; 5 box-shadow: -8px -8px 15px rgba(255, 255, 255, .7), 6 10px 10px 10px rgba(0, 0, 0, .2), 7 inset 8px 8px 15px rgba(255, 255, 255, .7), 8 inset 10px 10px 10px rgba(0, 0, 0, .2); 9 justify-content: space-between; 10 align-items: center; 11} 12 13.switch-label { 14 padding: 0 20px 0 10px 15} 16 17.switch-label i { 18 margin-right: 5px; 19} 20 21.switch-toggle { 22 height: 40px; 23} 24 25.switch-toggle input[type="checkbox"] { 26 position: absolute; 27 opacity: 0; 28 z-index: -2; 29} 30 31.switch-toggle input[type="checkbox"]+label { 32 position: relative; 33 display: inline-block; 34 width: 100px; 35 height: 40px; 36 border-radius: 20px; 37 margin: 0; 38 cursor: pointer; 39 box-shadow: inset -8px -8px 15px rgba(255, 255, 255, .6), 40 inset 10px 10px 10px rgba(0, 0, 0, .25); 41} 42 43.switch-toggle input[type="checkbox"]+label::before { 44 position: absolute; 45 content: 'OFF'; 46 font-size: 13px; 47 text-align: center; 48 line-height: 25px; 49 top: 8px; 50 left: 8px; 51 width: 45px; 52 height: 25px; 53 border-radius: 20px; 54 background-color: #eeeeee; 55 box-shadow: -3px -3px 5px rgba(255, 255, 255, .5), 56 3px 3px 5px rgba(0, 0, 0, .25); 57 transition: .3s ease-in-out; 58} 59 60.switch-toggle input[type="checkbox"]:checked+label::before { 61 left: 50%; 62 content: 'ON'; 63 color: #fff; 64 background-color: #00b33c; 65 box-shadow: -3px -3px 5px rgba(255, 255, 255, .5), 66 3px 3px 5px #00b33c; 67}
MIT License