#e8e8e8
1.checkbox { 2 display: none; 3} 4 5.slider { 6 width: 60px; 7 height: 30px; 8 background-color: lightgray; 9 border-radius: 20px; 10 overflow: hidden; 11 display: flex; 12 align-items: center; 13 border: 4px solid transparent; 14 transition: .3s; 15 box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset; 16 cursor: pointer; 17} 18 19.slider::before { 20 content: ''; 21 display: block; 22 width: 100%; 23 height: 100%; 24 background-color: #fff; 25 transform: translateX(-30px); 26 border-radius: 20px; 27 transition: .3s; 28 box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25); 29} 30 31.checkbox:checked ~ .slider::before { 32 transform: translateX(30px); 33 box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25); 34} 35 36.checkbox:checked ~ .slider { 37 background-color: #2196F3; 38} 39 40.checkbox:active ~ .slider::before { 41 transform: translate(0); 42}
Comments
1tranquoclong 29. August at 10:16
29. August at 10:16
test
MIT License