Switch by kamehame-ha
#212121
1.gravity-switch { 2 width: 4em; 3 height: 2em; 4 border-radius: 22px; 5 position: relative; 6 display: inline-block; 7} 8 9.gravity-switch input[type=checkbox] { 10 opacity: 0; 11 width: 0; 12 height: 0; 13} 14 15.gravity-switch .slider { 16 position: absolute; 17 cursor: pointer; 18 top: 0; 19 left: 0; 20 right: 0; 21 bottom: 0; 22 background-color: #ccc; 23 transition-delay: .4s; 24 transition: .4s; 25 border-radius: 30px; 26} 27 28.gravity-switch .slider:before { 29 position: absolute; 30 content: ""; 31 height: 1.4em; 32 width: 1.4em; 33 border-radius: 20px; 34 left: 0.3em; 35 bottom: 0.3em; 36 background-color: white; 37 transition-delay: .4s; 38 transition: .4s; 39} 40 41.gravity-switch input:checked + .slider { 42 transform: rotate(90deg); 43 transform-origin: 25% 50%; 44 background-color: #22c55e; 45} 46 47.gravity-switch input:checked+.slider:before { 48 transition-delay: 400ms; 49 transform: translateX(2em) 50}
677 views
677 views
MIT License