#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 1; 5 -webkit-appearance: none; 6 cursor: pointer; 7 height: 50px; 8 width: 50px; 9 box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10 10px 10px 15px rgba(0,0,70,0.12); 11 border-radius: 50%; 12 border: 8px solid #ececec; 13 outline: none; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 transition: .5s; 18} 19 20.container { 21 display: flex; 22 justify-content: center; 23 align-items: center; 24} 25 26.container input::after { 27 transition: .5s; 28 font-family: monospace; 29 content: ''; 30 color: #7a7a7a; 31 font-size: 25px; 32 left: 0.45em; 33 top: 0.25em; 34 width: 0.25em; 35 height: 0.5em; 36 border: solid #7a7a7a; 37 border-width: 0 0.15em 0.15em 0; 38 transform: rotate(45deg); 39} 40 41.container input:checked { 42 box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 43 10px 10px 15px rgba(70,70,70,0.12), 44 inset -10px -10px 15px rgba(255,255,255,0.5), 45 inset 10px 10px 15px rgba(70,70,70,0.12); 46 transition: .5s; 47} 48 49.container input:checked::after { 50 transition: .5s; 51 border: solid #15e38a; 52 border-width: 0 0.15em 0.15em 0; 53 transform: rotate(45deg); 54} 55
Comments
MIT License