#e8e8e8
1.toggle-switch { 2 position: relative; 3 width: 100px; 4 height: 50px; 5 --light: #d8dbe0; 6 --dark: #28292c; 7 --link: rgb(27, 129, 112); 8 --link-hover: rgb(24, 94, 82); 9} 10 11.switch-label { 12 position: absolute; 13 width: 100%; 14 height: 50px; 15 background-color: var(--dark); 16 border-radius: 25px; 17 cursor: pointer; 18 border: 3px solid var(--dark); 19} 20 21.checkbox { 22 position: absolute; 23 display: none; 24} 25 26.slider { 27 position: absolute; 28 width: 100%; 29 height: 100%; 30 border-radius: 25px; 31 -webkit-transition: 0.3s; 32 transition: 0.3s; 33} 34 35.checkbox:checked ~ .slider { 36 background-color: var(--light); 37} 38 39.slider::before { 40 content: ""; 41 position: absolute; 42 top: 10px; 43 left: 10px; 44 width: 25px; 45 height: 25px; 46 border-radius: 50%; 47 -webkit-box-shadow: inset 12px -4px 0px 0px var(--light); 48 box-shadow: inset 12px -4px 0px 0px var(--light); 49 background-color: var(--dark); 50 -webkit-transition: 0.3s; 51 transition: 0.3s; 52} 53 54.checkbox:checked ~ .slider::before { 55 -webkit-transform: translateX(50px); 56 -ms-transform: translateX(50px); 57 transform: translateX(50px); 58 background-color: var(--dark); 59 -webkit-box-shadow: none; 60 box-shadow: none; 61} 62
8.6K views
8.6K views
Comments
MIT License