Switch by elijahgummer
#e8e8e8
1.checkbox input[type="checkbox"] { 2 visibility: hidden; 3 display: none; 4} 5 6.checkbox .toggle { 7 position: relative; 8 display: block; 9 width: 40px; 10 height: 20px; 11 cursor: pointer; 12 -webkit-tap-highlight-color: transparent; 13 transform: translate3d(0, 0, 0); 14} 15.checkbox .toggle:before { 16 content: ""; 17 position: relative; 18 top: 3px; 19 left: 3px; 20 width: 34px; 21 height: 14px; 22 display: block; 23 background: #9a9999; 24 border-radius: 8px; 25 transition: background 0.2s ease; 26} 27.checkbox .toggle span { 28 position: absolute; 29 top: 0; 30 left: 0; 31 width: 20px; 32 height: 20px; 33 display: block; 34 background: white; 35 border-radius: 10px; 36 box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5); 37 transition: all 0.2s ease; 38} 39.checkbox .toggle span:before { 40 content: ""; 41 position: absolute; 42 display: block; 43 margin: -18px; 44 width: 56px; 45 height: 56px; 46 background: rgba(79, 46, 220, 0.5); 47 border-radius: 50%; 48 transform: scale(0); 49 opacity: 1; 50 pointer-events: none; 51} 52 53.checkbox #cbx:checked + .toggle:before { 54 background: #947ada; 55} 56.checkbox #cbx:checked + .toggle span { 57 background: #4f2edc; 58 transform: translateX(20px); 59 transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease; 60 box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2); 61} 62.checkbox #cbx:checked + .toggle span:before { 63 transform: scale(1); 64 opacity: 0; 65 transition: all 0.4s ease; 66} 67
244 views
244 views
MIT License