Switch by AnthonyPreite
#212121
1.switch { 2 position: relative; 3 display: inline-block; 4 width: 60px; 5 height: 34px; 6} 7 8.switch .checkbox { 9 opacity: 0; 10 width: 0; 11 height: 0; 12} 13 14.slider { 15 position: absolute; 16 cursor: pointer; 17 top: 0; 18 left: 0; 19 right: 0; 20 bottom: 0; 21 background-color: transparent; 22 -webkit-transition: 0.4s; 23 transition: 0.4s; 24 box-shadow: 1px 1px 5px 0 #d84f68 inset; 25} 26 27.slider:before { 28 position: absolute; 29 content: ""; 30 height: 26px; 31 width: 26px; 32 left: 4px; 33 bottom: 4px; 34 background-color: #d84f68; 35 -webkit-transition: 0.4s; 36 transition: 0.4s; 37 box-shadow: inset 1px 1px 2px 0px #ff7ca7; 38} 39 40.checkbox:checked + .slider { 41 box-shadow: 1px 1px 5px 0 #2a9d8f inset; 42} 43 44.checkbox:checked + .slider:before { 45 -webkit-transform: translateX(26px); 46 -ms-transform: translateX(26px); 47 transform: translateX(26px); 48 background-color: #2a9d8f; 49 box-shadow: inset -1px 1px 2px 0px #a3fff4; 50} 51 52/* Rounded sliders */ 53.slider.round { 54 border-radius: 34px; 55} 56 57.slider.round:before { 58 border-radius: 50%; 59} 60
377 views
377 views
MIT License