Switch by Saiyed-Tanvir
#212121
1.tgl { 2 position: relative; 3 display: inline-block; 4 width: 5em; 5 height: 1em; 6} 7 8.tgl input { 9 display: none; 10} 11 12.slider { 13 position: absolute; 14 cursor: pointer; 15 top: 0; 16 left: 0; 17 right: 0; 18 bottom: 0; 19 background-color: #ccc; 20 transition: .4s; 21 border-radius: 30px; 22} 23 24.slider:before { 25 position: absolute; 26 content: ""; 27 height: 3.4em; 28 width: 1.4em; 29 border-radius: 20px; 30 left: 0.3em; 31 bottom: -1.3em; 32 background-color: #ffffff; 33 box-shadow: 0px 0px 5px #0009; 34 transition: 1s cubic-bezier(0.49, -1.3, 0.45, 2.44); 35} 36 37.tgl input:checked + .slider { 38 background-color: #2196F3; 39} 40 41.tgl input:checked + .slider:before { 42 transform: translateX(2.5em) rotateZ(-180deg); 43}
2K views
2K views
MIT License