526 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} 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 inset: 0; 22 background: #d4acfb; 23 border-radius: 50px; 24 transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); 25} 26 27.slider:before { 28 position: absolute; 29 content: ""; 30 height: 1.4em; 31 width: 1.4em; 32 left: 0.3em; 33 bottom: 0.3em; 34 background-color: white; 35 border-radius: 50px; 36 box-shadow: 0 0px 20px rgba(0,0,0,0.4); 37 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 38} 39 40.switch input:checked + .slider { 41 background: #b84fce; 42} 43 44.switch input:focus + .slider { 45 box-shadow: 0 0 1px #b84fce; 46} 47 48.switch input:checked + .slider:before { 49 transform: translateX(1.6em); 50 width: 2em; 51 height: 2em; 52 bottom: 0; 53}
MIT License