#e8e8e8
1#checkbox { 2 display: none; 3} 4 5.Switch { 6 position: relative; 7 width: 50px; 8 height: 100px; 9 background-color: rgb(228, 228, 228); 10 border-radius: 30px; 11 z-index: 1; 12 cursor: pointer; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.274) inset, 17 -2px 0px 5px rgba(255, 255, 255, 0.411) inset; 18} 19 20.Switch::before { 21 content: ""; 22 background-color: rgb(39, 39, 39); 23 position: absolute; 24 height: 80%; 25 width: 5px; 26 border-radius: 5px; 27} 28 29.Switch::after { 30 background-color: #5e5e5e; 31 border: 1px solid rgb(35, 255, 35); 32 content: ""; 33 position: absolute; 34 height: 5px; 35 width: 25px; 36 top: 15px; 37 transition-duration: .3s; 38 box-shadow: 5px 2px 5px rgba(8, 8, 8, 0.288); 39 border-radius: 5px; 40} 41 42#checkbox:checked+.Switch::after { 43 transform: translateY(65px); 44 transition-duration: .3s; 45 border: 1px solid rgb(236, 0, 0); 46} 47
1.2K views
1.2K views
Comments
MIT License