Switch by shadowfax29
#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 --mud: #8B4513; 9} 10 11/* Hide default HTML checkbox */ 12.switch input { 13 opacity: 0; 14 width: 0; 15 height: 0; 16} 17 18/* The slider */ 19.slider { 20 position: absolute; 21 cursor: pointer; 22 top: 0; 23 left: 0; 24 right: 0; 25 bottom: 0; 26 background: linear-gradient(to bottom,skyblue 70%,var(--mud)); 27 transition: .4s; 28 border-radius: 30px; 29 border: 2px solid black; 30} 31 32.slider:before { 33 position: absolute; 34 content: ""; 35 height: 1.4em; 36 width: 1.4em; 37 border-radius: 20px; 38 left: 0.3em; 39 bottom: 0.3em; 40 transition: .4s; 41} 42 43.plant { 44 position: absolute; 45 bottom: 3px; 46 right: -30px; 47 z-index: 3; 48 opacity: 0; 49} 50 51.seed { 52 position: absolute; 53 content: ""; 54 height: 1.4em; 55 width: 1.4em; 56 border-radius: 20px; 57 left: 0.3em; 58 bottom: 0.3em; 59 transition: .4s; 60} 61 62.switch input:checked + .slider { 63 background-color: #156829; 64} 65 66.switch input:focus + .slider { 67 box-shadow: 0 0 1px #156829; 68} 69 70.switch input:checked + .slider:before, 71.switch input:checked + .slider .seed { 72 transform: translateX(1.5em); 73} 74 75.switch input:checked + .slider .seed { 76 opacity: 0; 77} 78 79.switch input:checked + .slider .plant { 80 animation: zoomIn 0.5s forwards; 81} 82 83@keyframes zoomIn { 84 0% { 85 transform: scale(0); 86 opacity: 0; 87 } 88 89 100% { 90 transform: scale(1); 91 opacity: 1; 92 } 93}
675 views
675 views
MIT License