Switch by ozgeozkaraa01
#e8e8e8
1.toggle-switch { 2 position: relative; 3 display: inline-block; 4 width: 60px; 5 height: 34px; 6} 7 8.toggle-input { 9 display: none; 10} 11 12.toggle-label { 13 position: absolute; 14 top: 0; 15 left: 0; 16 width: 60px; 17 height: 34px; 18 border-radius: 17px; 19 background-color: #ccc; 20 cursor: pointer; 21 transition: background-color 0.4s ease; 22} 23 24.toggle-label:before { 25 content: ''; 26 position: absolute; 27 top: 3px; 28 left: 3px; 29 width: 28px; 30 height: 28px; 31 border-radius: 50%; 32 background-color: #fff; 33 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 34 transition: transform 0.4s ease; 35} 36 37.toggle-input:checked + .toggle-label { 38 background-color: #86d993; 39} 40 41.toggle-input:checked + .toggle-label:before { 42 transform: translateX(26px); 43}
810 views
810 views
MIT License