Switch by AmIt-DasIT
#212121
1.checkbox { 2 width: 223px; 3 height: 60px; 4 background-color: #d0d0d0; 5 border-radius: 30px; 6 position: relative; 7 color: black; 8 overflow: hidden; 9} 10 11#checkbox_toggle { 12 display: none; 13} 14 15.checkbox .toggle { 16 width: 100px; 17 height: 50px; 18 position: absolute; 19 border-radius: 30px; 20 left: 5px; 21 cursor: pointer; 22 background: linear-gradient(40deg, #FF0080,#FF8C00 70%); 23 transition: 0.4s; 24 box-shadow: 0px 0px 3px rgb(255, 255, 20), 0px 0px 5px rgb(255, 255, 20); 25} 26 27.checkbox .slide { 28 width: 230px; 29 height: 60px; 30 display: flex; 31 align-items: center; 32 justify-content: space-around; 33 cursor: pointer; 34} 35 36.checkbox .slide .text { 37 font-size: 16px; 38 font-weight: 700; 39 z-index: 100; 40 cursor: pointer; 41} 42 43.check:checked + .checkbox .slide .toggle { 44 transform: translateX(113px); 45 background: linear-gradient(40deg, #8983F7, #A3DAFB 70%); 46 box-shadow: -0px -0px 10px #8983F7, -0px -0px 3px #8983F7; 47} 48 49.check:checked + .checkbox .slide { 50 background-color: #0a1929; 51 color: #fff; 52}
2.5K views
2.5K views
MIT License