Switch by r7chardgh
#e8e8e8
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.toggle { 18 position: relative; 19 display: flex; 20 width: 2.8em; 21 height: 1em; 22 background-color: rgb(165, 165, 165); 23 justify-content: center; 24} 25 26.toggle::before { 27 content: ""; 28 position: absolute; 29 z-index: -1; 30 width: .8em; 31 height: 2em; 32 margin-bottom: .5em; 33 bottom: 0; 34 background-color: rgb(153, 104, 39); 35 box-shadow: 0 -1em 0 0 rgb(165, 165, 165); 36 transform-origin: bottom; 37 transform: rotateZ(-30deg); 38 transition: transform 150ms; 39} 40 41.switch input:checked + .toggle::before { 42 transform: rotateZ(30deg); 43} 44 45.switch input:checked + .toggle { 46 box-shadow: 0 -1em 2em 0 rgb(230, 111, 111); 47} 48
1.6K views
1.6K views
MIT License