Switch by nanda248
#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 4em; 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: #585F60; 26 transition: .5s; 27 border-radius: 1em; 28 z-index: 1; 29} 30 31.slider .circle { 32 position: absolute; 33 content: ""; 34 height: 1.4em; 35 width: 1.4em; 36 border-radius: 50%; 37 left: 0.3em; 38 bottom: 0.3em; 39 background-color: #F1EEF5; 40 transition: .5s; 41 z-index: 5; 42} 43 44.divider { 45 position: absolute; 46 left: 0.65em; 47 width: 0.8em; 48 height: 1.4em; 49 background-color: #eed202; 50 z-index: 10; 51 border-radius: 0 2em 2em 0; 52 transition: .4s; 53} 54 55.switch input:checked + .slider { 56 background-color: #eed202; 57 z-index: 1; 58} 59 60.switch input:focus + .slider { 61 box-shadow: 0 0 4px #191A28; 62} 63 64.switch input:checked + .slider .circle { 65 transform: translateX(2em); 66} 67 68.switch input:checked + .slider .circle .divider { 69 left: 0; 70 width: 0.8em; 71 border-radius: 2em 0 0 2em; 72 background-color: #585F60; 73 z-index: 10; 74}
415 views
415 views
MIT License