Switch by MuhammadHasann
#e8e8e8
1.toggle-cont { 2 width: 100px; 3 height: 50px; 4 border-radius: 9999px; 5} 6 7.toggle-cont .toggle-input { 8 display: none; 9} 10 11.toggle-cont .toggle-label { 12 cursor: pointer; 13 position: relative; 14 display: inline-block; 15 padding: 6px; 16 width: 100%; 17 height: 100%; 18 background: #272727; 19 border-radius: 9999px; 20 box-sizing: content-box; 21 box-shadow: 0px 0px 16px -8px #fefefe; 22} 23 24.toggle-cont .toggle-label .cont-label-play { 25 position: relative; 26 width: 50px; 27 aspect-ratio: 1 / 1; 28 background: #5e5e5e; 29 border-radius: 9999px; 30 transition: all 0.5s cubic-bezier(1, 0, 0, 1); 31} 32 33.toggle-cont .toggle-input:checked + .toggle-label .cont-label-play { 34 background: #f43f5e; 35 transform: translateX(50px); 36} 37 38.toggle-cont .toggle-label .label-play { 39 position: absolute; 40 top: 50%; 41 left: 50%; 42 transform: translate(-50%, -50%); 43 display: inline-block; 44 width: 24px; 45 aspect-ratio: 1 / 1; 46 background: #fefefe; 47 border-radius: 4px; 48 clip-path: polygon(25% 0, 75% 50%, 25% 100%, 25% 51%); 49 transition: all 0.5s cubic-bezier(1, 0, 0, 1); 50} 51 52.toggle-cont .toggle-input:checked + .toggle-label .label-play { 53 width: 20px; 54 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 55} 56
1.2K views
1.2K views
Variations
1 MIT License