Switch by Ali-Tahmazi99
#e8e8e8
1input[type = "checkbox"] { 2 visibility: hidden; 3 display: none; 4 appearance: none; 5 -webkit-appearance: none; 6} 7 8label.container { 9 display: block; 10 width: 60px; 11 height: 30px; 12 background: #d3d3d3; 13 border-radius: 50px; 14 position: relative; 15 cursor: pointer; 16 box-shadow: 9px 9px 29px #969696, 17 -9px -9px 29px #ffffff; 18} 19 20label.shadow { 21 width: 50px; 22 height: 20px; 23 position: absolute; 24 border-radius: 50px; 25 left: 5px; 26 top: 5px; 27 box-shadow: inset 3px 3px 10px #969696, 28 inset -3px -3px 5px #ffffffbd; 29 cursor: pointer; 30} 31 32.container span { 33 display: inline-block; 34 width: 20px; 35 height: 20px; 36 background-color: #ffaa00; 37 margin: 5px; 38 border-radius: 50px; 39 font-size: 20px; 40 transition: all 0.3s ease-in; 41 position: relative; 42 left: 0; 43 z-index: 1; 44} 45 46.container span::after { 47 position: absolute; 48 top: 6px; 49 left: 4px; 50 transition-delay: 5s; 51} 52 53input[type = "checkbox"]:checked ~ span { 54 left: 29px; 55 transition: 0.3s ease-in; 56 background: #0a100d; 57 transform: rotate(220deg); 58}
3.6K views
3.6K views
MIT License