Switch by sabin-koju
#212121
1.switch { 2 display: -ms-inline-flexbox; 3 display: inline-flex; 4 -ms-flex-align: center; 5 align-items: center; 6} 7 8.switch .switch-label { 9 cursor: pointer; 10} 11 12.switch .switch-input { 13 appearance: none; 14 display: -ms-inline-flexbox; 15 display: inline-flex; 16 -ms-flex-align: center; 17 align-items: center; 18 box-shadow: inset 0 0 0 1px #c9c9c9; 19 background-color: #dadada; 20 width: 3rem; 21 min-width: 3rem; 22 padding: 0.125rem; 23 border-radius: 3rem; 24 cursor: pointer; 25 transition: background-color 0.75s ease, box-shadow 0.35s ease-in; 26} 27 28.switch .switch-input:before { 29 position: relative; 30 content: ""; 31 display: inline-block; 32 border-radius: 1rem; 33 height: 1.5rem; 34 width: 1.5rem; 35 box-shadow: 0 0 3px rgba(0, 0, 0, 0.32); 36 background-color: #ffffff; 37 border: 1px solid rgba(0, 0, 0, 0); 38 transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.175); 39} 40 41.switch .switch-input:active:not(:disabled):before { 42 width: 1.75rem; 43} 44 45.switch .switch-input:hover:not(:disabled) { 46 box-shadow: inset 0 0 0 1rem #c9c9c9; 47} 48 49.switch .switch-input:focus, .switch .switch-input:focus-within { 50 box-shadow: 0 0 0 0.125rem #4caf30; 51 outline: none; 52} 53 54.switch .switch-input:focus:before, .switch .switch-input:focus-within:before { 55 box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4); 56} 57 58.switch .switch-input:checked { 59 background-color: #5dca3e; 60 box-shadow: inset 0 0 0 1px #5dca3e; 61} 62 63.switch .switch-input:checked:before { 64 transform: translate3d(calc(100% - 0.5rem), 0, 0); 65} 66 67.switch .switch-input:checked:active:not(:disabled):before { 68 margin-left: -0.5rem; 69} 70 71.switch .switch-input:checked:hover:not(:disabled) { 72 box-shadow: inset 0 0 0 1rem #459f2c; 73} 74 75.switch .switch-input:checked:focus, .switch .switch-input:checked:focus-within { 76 box-shadow: 0 0 0 0.125rem #4caf30; 77} 78 79.switch .switch-input:disabled { 80 pointer-events: none; 81 cursor: not-allowed; 82 opacity: 0.5; 83 user-select: none; 84} 85 86.switch .switch-input:disabled:before { 87 background-color: #f8f8f8; 88}
666 views
666 views
MIT License