Switch by YaroslavFilipenko
#e8e8e8
1.switch { 2 position: relative; 3 display: inline-block; 4 width: 60px; 5 height: 20px; 6} 7 8.switch input { 9 opacity: 0; 10 width: 0; 11 height: 0; 12} 13 14.slider { 15 position: absolute; 16 cursor: pointer; 17 top: 0; 18 left: 0; 19 right: 0; 20 bottom: 0; 21 background-color: #b1b9c3; 22 -webkit-transition: 0.4s; 23 transition: 0.4s; 24} 25 26.slider:before { 27 position: absolute; 28 content: ''; 29 height: 30px; 30 width: 30px; 31 bottom: -5px; 32 background: #18333E; 33 -webkit-transition: 0.4s; 34 transition: 0.4s; 35} 36 37.slider.round { 38 border-radius: 34px; 39} 40 41.slider.round:before { 42 border-radius: 50%; 43} 44 45input:checked+.slider { 46 background-color: #b1b9c3; 47} 48 49input:checked+.slider:before { 50 -webkit-transform: translateX(35px); 51 -ms-transform: translateX(35px); 52 transform: translateX(35px); 53 background: #F2F8FD; 54}
743 views
743 views
MIT License