This post is saved as a draft.
#e8e8e8
1.theme { 2 --bg-color: rgb(24, 19, 19); 3 position: relative; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 width: 40px; 8 height: 40px; 9 background-color: var(--bg-color); 10 border-radius: 100%; 11 box-shadow: 0px 0px 5px 7px rgba(0, 0, 0, 0.199); 12 transition: all .6s ease; 13} 14 15.input { 16 cursor: pointer; 17 position: absolute; 18 width: 100%; 19 height: 100%; 20 z-index: 10; 21 opacity: 0; 22} 23 24.icon { 25 position: absolute; 26 top: calc(50% -13px); 27 left: calc(50% -13px); 28 width: 26px; 29 height: 26px; 30} 31 32.wifi-on { 33 fill: lightgreen; 34} 35 36.wifi-off { 37 display: none; 38} 39 40.input:checked ~ .wifi-off { 41 display: block; 42} 43 44.input:checked ~ .wifi-on { 45 display: none; 46} 47 48.theme:active { 49 border-radius: 100%; 50 box-shadow: inset 0px 0px 10px 0px rgb(240, 237, 237); 51 transform: translate(3px, 3px); 52}
Variation of acheckbox
Variation of acheckbox