Switch by Na3ar-17
#212121
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 margin: 0; 6 padding: 0; 7 box-sizing: border-box; 8 font-family: Arial, Helvetica, sans-serif; 9 color: #fff; 10} 11 12.switch { 13 font-size: 0.875rem; 14 position: relative; 15 display: inline-block; 16 width: 9em; 17 height: 2.6em; 18} 19 20.switch input { 21 display: none; 22 opacity: 0; 23 width: 0; 24 height: 0; 25} 26 27.switch input:checked + .slider .ball { 28 box-shadow: 10px 10px 100px #7f8996; 29} 30 31.switch input:checked + .slider .title { 32 left: 40%; 33} 34 35.switch input:checked + .slider { 36 background-color: #8a5cd4; 37} 38 39.switch input:focus + .slider { 40 box-shadow: 10px 10px 100px #7f8996; 41} 42 43.switch input:checked + .slider .ball { 44 left: 72%; 45 transform: rotate(360deg); 46 box-shadow: none; 47 outline: 6px solid rgba(255, 255, 255, 0.278); 48} 49 50.switch .slider { 51 position: absolute; 52 cursor: pointer; 53 top: 0; 54 left: 0; 55 right: 0; 56 bottom: 0; 57 background-color: #313033; 58 transition: all 0.4s; 59 border-radius: 30px; 60} 61 62.switch .slider .title { 63 position: absolute; 64 top: 50%; 65 left: 50%; 66 transform: translate(-50%, -50%); 67 font-weight: 600; 68 transition: all 0.4s; 69 -webkit-user-select: none; 70 -ms-user-select: none; 71 user-select: none; 72} 73 74.switch .slider .ball { 75 background-color: #fff; 76 height: 36px; 77 width: 36px; 78 border-radius: 50%; 79 position: absolute; 80 left: -1px; 81 transition: 0.4s; 82} 83 84.switch .slider .ball .icon { 85 position: absolute; 86 top: 58%; 87 left: 53%; 88 transform: translate(-50%, -50%); 89 color: #313033; 90 font-size: 12px; 91} 92
105 views
105 views
MIT License