Switch by BurgiSimon
#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 4.5em; 7 height: 2em; 8} 9 10/* Hide default HTML checkbox */ 11.switch input { 12 opacity: 0; 13 width: 0; 14 height: 0; 15} 16 17/* The slider */ 18.slider { 19 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background-color: #ff3636; 26 transition: 0.1s; 27 transition-delay: 0.2s; 28 border-radius: 30px; 29} 30 31.slider:before { 32 position: absolute; 33 content: ""; 34 height: 1.4em; 35 width: 1.4em; 36 border-radius: 20px; 37 left: 0.3em; 38 bottom: 0.3em; 39 background-color: white; 40 transition-delay: 0.2s; 41 transition: 0.1s; 42} 43 44.switch input:checked + .slider { 45 transition-delay: 0.2s; 46 background-color: #00c763; 47} 48 49.switch input:focus + .slider { 50 transition-delay: 0.2s; 51 box-shadow: 0 0 1px #00c763; 52} 53 54.switch input:checked + .slider:before { 55 transform: translateX(2.5em); 56 transition-delay: 0.2s; 57 transition-duration: 0.1s; 58} 59 60/* Animation Right */ 61@keyframes slideRight { 62 0% { 63 transform: translateX(0) translateY(0); 64 } 65 20% { 66 transform: translateX(0.5em) translateY(-1.5em); 67 } 68 40% { 69 transform: translateX(1em) translateY(-1.75em); /* Highest Point */ 70 } 71 60% { 72 transform: translateX(1.5em) translateY(-1.5em); 73 } 74 80% { 75 transform: translateX(2em) translateY(-1.25em); 76 } 77 100% { 78 transform: translateX(2.5em) translateY(0); 79 } 80} 81 82/* Slide Animation Left */ 83@keyframes slideLeft { 84 0% { 85 transform: translateX(2.5em) translateY(0); 86 } 87 20% { 88 transform: translateX(2em) translateY(-0.25em); 89 } 90 40% { 91 transform: translateX(1.5em) translateY(-0.5em); /* Highest Point */ 92 } 93 60% { 94 transform: translateX(1em) translateY(-0.75em); 95 } 96 80% { 97 transform: translateX(0.5em) translateY(-0.5em); 98 } 99 100% { 100 transform: translateX(0) translateY(0); 101 } 102} 103 104.switch input:checked + .slider:before { 105 animation: slideRight 0.15s forwards; 106} 107 108.switch input:not(:checked) + .slider:before { 109 animation: slideLeft 0.15s forwards; 110} 111
226 views
226 views
MIT License