Switch by JulioCodesSM
#212121
1.button { 2 display: inline-block; 3 width: 50px; 4 height: 20px; 5 background-color: #fff; 6 border-radius: 30px; 7 cursor: pointer; 8 padding: 0; 9 color: white; 10} 11 12#toggle { 13 display: none; 14} 15 16.slider { 17 display: block; 18 font-size: 10px; 19 position: relative; 20} 21 22.slider::after { 23 content: 'OFF'; 24 width: 25px; 25 height: 25px; 26 background-color: #e03c3c; 27 border: 2px solid #fff; 28 border-radius: 50%; 29 box-shadow: 0 0 5px rgba(0, 0, 0, .25); 30 position: absolute; 31 top: -5px; 32 left: 0; 33 display: grid; 34 place-content: center; 35 line-height: 0; 36 transition: background-color .25s, transform .25s ease-in; 37} 38 39#toggle:checked + .slider::after { 40 content: 'ON'; 41 background-color: #05ae3e; 42 transform: translateX(25px) rotate(360deg); 43}
6.6K views
6.6K views
MIT License