Switch by elijahgummer
#e8e8e8
1.inp { 2 appearance: none; 3} 4 5.check { 6 position: relative; 7 display: inline-block; 8 width: 40px; 9 height: 20px; 10 background: #111; 11 border-radius: 40px; 12} 13 14.check:before { 15 content: ""; 16 position: absolute; 17 top: 8px; 18 left: 4px; 19 width: 3px; 20 height: 3px; 21 border-radius: 90px; 22 transition: transform 0.5s; 23 box-shadow: 7.9px 0 0 5px #14f960; /* Change the color here */ 24} 25 26.inp:checked ~ .check:before { 27 transform: translateX(13px); 28} 29 30.check:after { 31 content: "N"; 32 position: absolute; 33 right: -16px; 34 top: -5px; 35 font-size: 20px; 36 color: #111; 37 opacity: 0; 38 transition: opacity 0.5s, transform 0.5s; 39 transform: translateX(20px); 40} 41 42.inp:checked ~ .check:after { 43 opacity: 1; 44 transform: translateX(0px); 45} 46
166 views
166 views
MIT License