Switch by KareemTolan
#e8e8e8
1/* Toggle switch styles */ 2.toggle-switch { 3 display: inline-block; 4 position: relative; 5 width: 60px; 6 height: 34px; 7} 8 9.toggle-switch input { 10 display: none; 11} 12 13.toggle-switch__slider { 14 position: absolute; 15 cursor: pointer; 16 top: 0; 17 left: 0; 18 right: 0; 19 bottom: 0; 20 background-color: #ccc; 21 border-radius: 34px; 22 transition: background-color 0.2s ease-in-out; 23} 24 25.toggle-switch__slider:before { 26 position: absolute; 27 content: ""; 28 height: 26px; 29 width: 26px; 30 left: 4px; 31 bottom: 4px; 32 background-color: #fff; 33 border-radius: 50%; 34 transition: transform 0.2s ease-in-out; 35} 36 37.toggle-switch input:checked + .toggle-switch__slider { 38 background-color: #2196f3; 39 /* Neon effect */ 40 box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #2196f3, 0 0 40px #2196f3, 0 0 50px #2196f3, 0 0 60px #2196f3, 0 0 70px #2196f3; 41} 42 43.toggle-switch input:checked + .toggle-switch__slider:before { 44 transform: translateX(26px); 45} 46 47/* Shake animation */ 48.toggle-switch input:checked + .toggle-switch__slider:before:hover { 49 animation: shake 0.5s ease-in-out; 50} 51 52@keyframes shake { 53 0% { 54 transform: translateX(0); 55 } 56 57 25% { 58 transform: translateX(-5px); 59 } 60 61 50% { 62 transform: translateX(5px); 63 } 64 65 75% { 66 transform: translateX(-5px); 67 } 68 69 100% { 70 transform: translateX(0); 71 } 72} 73 74/* Accessibility styles */ 75.toggle-switch input:focus + .toggle-switch__slider { 76 box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.5); 77} 78 79.toggle-switch input:focus:not(:checked) + .toggle-switch__slider:before, 80.toggle-switch input:focus:checked + .toggle-switch__slider:before { 81 box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5); 82} 83 84.toggle-switch input:not(:checked):disabled + .toggle-switch__slider, 85.toggle-switch input:checked:disabled + .toggle-switch__slider { 86 opacity: 0.5; 87 cursor: not-allowed; 88}
577 views
577 views
MIT License