Switch by vikramsinghnegi
#212121
1.toggle { 2 position: relative; 3 box-sizing: border-box; 4} 5.toggle input[type="checkbox"] { 6 position: absolute; 7 left: 0; 8 top: 0; 9 z-index: 10; 10 width: 100%; 11 height: 100%; 12 cursor: pointer; 13 opacity: 0; 14} 15.toggle label { 16 position: relative; 17 display: flex; 18 align-items: center; 19 box-sizing: border-box; 20} 21.toggle label:before { 22 content: ""; 23 width: 70px; 24 height: 40px; 25 background: #fff; 26 border: 2px solid #ddd; 27 box-shadow: inset -30px 0 0 #666; 28 position: relative; 29 display: inline-block; 30 border-radius: 20px; 31 box-sizing: border-box; 32 transition: 0.25s ease-in; 33} 34 35.toggle label:after { 36 content: ""; 37 width: 20px; 38 height: 20px; 39 position: absolute; 40 left: 10px; 41 top: 10px; 42 border-radius: 50%; 43 background: #fffdfd; 44 box-shadow: inset -8px -5px #333; 45 transition: 0.2s ease-in-out; 46} 47 48.toggle input[type="checkbox"]:checked + label:before { 49 box-shadow: inset 30px 0 0 #ffeb00; 50} 51.toggle input[type="checkbox"]:checked + label:after { 52 box-shadow: inset 0 0 0 2px #fff; 53 background: #ffbc00; 54 left: 39px; 55 top: 8px; 56 border: 2px dashed #fff; 57} 58
95 views
95 views
MIT License