Switch by SouravBandyopadhyay
#212121
1.toggle-button-cover { 2 display: inline-block; 3 position: relative; 4 width: 200px; 5 height: 140px; 6 box-sizing: border-box; 7} 8 9.button-cover:before { 10 counter-increment: button-counter; 11 content: counter(button-counter); 12 position: absolute; 13 right: 0; 14 bottom: 0; 15 color: #d7e3e3; 16 font-size: 12px; 17 line-height: 1; 18 padding: 5px; 19} 20 21.button-cover, 22.knobs, 23.layer { 24 position: absolute; 25 top: 0; 26 right: 0; 27 bottom: 0; 28 left: 0; 29} 30 31.button { 32 position: relative; 33 top: 50%; 34 width: 74px; 35 height: 36px; 36 margin: -20px auto 0 auto; 37 overflow: hidden; 38} 39 40.button.r, 41.button.r .layer { 42 border-radius: 100px; 43} 44 45.checkbox { 46 position: relative; 47 width: 100%; 48 height: 100%; 49 padding: 0; 50 margin: 0; 51 opacity: 0; 52 cursor: pointer; 53 z-index: 3; 54} 55 56.knobs { 57 z-index: 2; 58} 59 60.layer { 61 width: 100%; 62 background-color: #ebf7fc; 63 transition: 0.3s ease all; 64 z-index: 1; 65} 66 67#button-2 .knobs:before, 68#button-2 .knobs:after { 69 content: 'YES'; 70 position: absolute; 71 top: 4px; 72 left: 4px; 73 width: 20px; 74 height: 10px; 75 color: #fff; 76 font-size: 10px; 77 font-weight: bold; 78 text-align: center; 79 line-height: 1; 80 padding: 9px 4px; 81 background-color: #03f480; 82 border-radius: 50%; 83 transition: 0.3s ease all; 84} 85 86#button-2 .knobs:before { 87 content: 'YES'; 88} 89 90#button-2 .knobs:after { 91 content: 'NO'; 92} 93 94#button-2 .knobs:after { 95 right: -28px; 96 left: auto; 97 background-color: #f44336; 98} 99 100#button-2 .checkbox:checked + .knobs:before { 101 left: -28px; 102} 103 104#button-2 .checkbox:checked + .knobs:after { 105 right: 4px; 106} 107 108#button-2 .checkbox:checked ~ .layer { 109 background-color: #fcebeb; 110} 111
457 views
457 views
MIT License