17 views
CSSAdd prefixes
1.toggle-switch { 2 position: relative; 3 width: 90px; 4 height: 34px; 5 margin: 20px; 6} 7 8.toggle-switch input[type="checkbox"] { 9 opacity: 0; 10 width: 0; 11 height: 0; 12} 13 14.toggle-switch-label { 15 position: absolute; 16 top: 0; 17 left: 0; 18 right: 0; 19 bottom: 0; 20 background-color: #ddd; 21 border-radius: 34px; 22 cursor: pointer; 23 transition: all 0.4s ease; 24} 25 26.toggle-switch-label:before, 27.toggle-switch-label:after { 28 content: ""; 29 display: block; 30 position: absolute; 31 top: 0; 32 bottom: 0; 33 margin: auto; 34} 35 36.toggle-switch-label:before { 37 left: 10px; 38 width: 26px; 39 height: 26px; 40 background-color: white; 41 border-radius: 50%; 42 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 43 transition: all 0.4s ease; 44} 45 46.toggle-switch-label:after { 47 left: 0; 48 width: 46px; 49 height: 34px; 50 background-color: #fff; 51 border-radius: 34px; 52 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 53 transition: all 0.4s ease; 54} 55 56.toggle-switch-checkbox:checked + .toggle-switch-label:before { 57 transform: translateX(46px); 58} 59 60.toggle-switch-checkbox:checked + .toggle-switch-label { 61 background-color: #000000; 62} 63 64.toggle-switch-checkbox:checked + .toggle-switch-label:after { 65 transform: scale(0); 66} 67 68.toggle-switch-text { 69 position: absolute; 70 top: 5px; 71 left: 110px; 72 font-size: 16px; 73 font-weight: bold; 74 color: rgb(255, 255, 255); 75 text-shadow: 1px 1px 2px rgba(253, 251, 251, 0.2); 76 transition: all 0.4s ease; 77} 78 79.toggle-switch-checkbox:checked + .toggle-switch-label + .toggle-switch-text { 80 color: rgb(255, 255, 255); 81} 82
HTML
1<div class="toggle-switch"> 2 <input id="toggle-switch" class="toggle-switch-checkbox" type="checkbox"> 3 <label for="toggle-switch" class="toggle-switch-label"> 4 <span class="toggle-switch-inner"></span> 5 <span class="toggle-switch-switch"></span> 6 </label> 7 <span class="toggle-switch-text"></span> 8</div> 9