Switch by csemszepp
#e8e8e8
1.switch { 2 position: relative; 3 display: inline-block; 4 width: 60px; 5 height: 34px; 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: #6E6E6E; 22 transition: .4s; 23} 24 25.slider:before { 26 position: absolute; 27 content: ""; 28 height: 26px; 29 width: 26px; 30 left: 4px; 31 bottom: 4px; 32 background-color: white; 33 transition: .4s; 34} 35 36.input:checked + .slider { 37 background-color: #1849AB; 38} 39 40.input:focus + .slider { 41 box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.7); 42 outline: none; 43} 44 45.input:checked + .slider:before { 46 transform: translateX(26px); 47} 48 49.slider.round { 50 border-radius: 34px; 51} 52 53.slider.round:before { 54 border-radius: 50%; 55}
614 views
614 views
MIT License