Switch by devestter
#e8e8e8
1.toggle-button-cover { 2 display: table-cell; 3 position: relative; 4 width: 200px; 5 height: 140px; 6 box-sizing: border-box; 7} 8 9.button-cover { 10 height: 100px; 11 margin: 20px; 12 background-color: #fff; 13 box-shadow: 0 10px 20px -8px #c5d6d6; 14 border-radius: 4px; 15} 16 17.button-cover:before { 18 counter-increment: button-counter; 19 content: counter(button-counter); 20 position: absolute; 21 right: 0; 22 bottom: 0; 23 color: #d7e3e3; 24 font-size: 12px; 25 line-height: 1; 26 padding: 5px; 27} 28 29.button-cover, 30.knobs, 31.layer { 32 position: absolute; 33 top: 0; 34 right: 0; 35 bottom: 0; 36 left: 0; 37} 38 39.button { 40 position: relative; 41 top: 50%; 42 width: 90px; 43 height: 38px; 44 margin: -20px auto 0 auto; 45 overflow: hidden; 46 box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 47} 48 49.checkbox { 50 position: relative; 51 width: 100%; 52 height: 100%; 53 padding: 0; 54 margin: 0; 55 opacity: 0; 56 cursor: pointer; 57 z-index: 3; 58} 59 60.knobs { 61 z-index: 2; 62} 63 64.layer { 65 width: 100%; 66 background-color: #524949; 67 transition: 1s ease all; 68 z-index: 1; 69} 70 71.button.r, 72.button.r .layer { 73 border-radius: 12px; 74} 75 76#button-3 .knobs:before { 77 content: "ON"; 78 position: absolute; 79 top: 4px; 80 left: 7px; 81 width: 23px; 82 height: 11px; 83 color: rgb(22, 21, 21); 84 font-size: 10px; 85 font-weight: bold; 86 text-align: center; 87 line-height: 1; 88 padding: 9px 4px; 89 background-color: rgb(240, 235, 233); 90 border-radius: 30%; 91 transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); 92 display: flex; 93 align-items: center; 94 justify-content: center; 95} 96 97#button-3 .checkbox:active + .knobs:before { 98 width: 36px; 99 border-radius: 2px; 100} 101 102#button-3 .checkbox:checked:active + .knobs:before { 103 margin-left: -26px; 104} 105 106#button-3 .checkbox:checked + .knobs:before { 107 content: "OFF"; 108 left: 50px; 109 background-color: #f44336; 110 color: white; 111} 112 113#button-3 .checkbox:checked ~ .layer { 114 background-color: #524949; 115}
852 views
Variation of aswitch
MIT License