2K views
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 3.5em; 7 height: 2em; 8 transform-style: preserve-3d; 9 perspective: 500px; 10 animation: toggle__animation 3s infinite; 11} 12 13.switch::before { 14 content: ""; 15 position: absolute; 16 width: 100%; 17 height: 100%; 18 left: 0; 19 top: 0; 20 filter: blur(20px); 21 z-index: -1; 22 border-radius: 50px; 23 background-color: #d8ff99; 24 background-image: radial-gradient(at 21% 46%, hsla(183,65%,60%,1) 0px, transparent 50%), 25radial-gradient(at 23% 25%, hsla(359,74%,70%,1) 0px, transparent 50%), 26radial-gradient(at 20% 1%, hsla(267,83%,75%,1) 0px, transparent 50%), 27radial-gradient(at 86% 87%, hsla(204,69%,68%,1) 0px, transparent 50%), 28radial-gradient(at 99% 41%, hsla(171,72%,77%,1) 0px, transparent 50%), 29radial-gradient(at 55% 24%, hsla(138,60%,62%,1) 0px, transparent 50%); 30} 31 32/* Hide default HTML checkbox */ 33.switch input { 34 opacity: 0; 35 width: 0; 36 height: 0; 37} 38 39/* The slider */ 40.slider { 41 position: absolute; 42 cursor: pointer; 43 top: 0; 44 left: 0; 45 right: 0; 46 bottom: 0; 47 background-color: #fdfefedc; 48 transition: .4s; 49 border-radius: 30px; 50} 51 52.slider:before { 53 position: absolute; 54 content: ""; 55 height: 1.4em; 56 width: 1.4em; 57 left: 0.3em; 58 bottom: 0.35em; 59 transition: .4s; 60 border-radius: 50%; 61 box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset, 62 rgba(0, 0, 0, 0.09) 0px -1px 15px -8px; 63 background-color: #ff99fd; 64 background-image: radial-gradient(at 81% 39%, hsla(327,79%,79%,1) 0px, transparent 50%), 65 radial-gradient(at 11% 72%, hsla(264,64%,79%,1) 0px, transparent 50%), 66 radial-gradient(at 23% 20%, hsla(75,98%,71%,1) 0px, transparent 50%); 67} 68 69.input__check:checked + .slider { 70 background-color: #17202A; 71} 72 73.input__check:checked + .slider:before { 74 transform: translateX(1.5em); 75} 76 77@keyframes toggle__animation { 78 0%, 100% { 79 transform: translateY(-10px) rotateX(15deg) rotateY(-20deg); 80 } 81 82 50% { 83 transform: translateY(0px) rotateX(15deg) rotateY(-20deg); 84 } 85}
EddyBel
Eduardo Rangel
I'm Eduardo, a software developer. I specialize in mobile applications, websites and artificial intelligence projects.
MIT License