Switch by sahilxkhadka
#e8e8e8
1.switch { 2 position: relative; 3 width: 48px; 4 height: 48px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 background-color: rgb(60,64,67); 9 color: #fff; 10 border-radius: 50%; 11 cursor: pointer; 12 transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 13} 14 15.mic-on, .mic-off { 16 width: 100%; 17 height: 100%; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 transition: all .3s ease-in-out; 22} 23 24.mic-on { 25 z-index: 4; 26} 27 28.mic-off { 29 position: absolute; 30 inset: 0; 31 z-index: 5; 32 opacity: 0; 33} 34 35.switch:hover { 36 background-color: rgba(60,64,67, 0.8); 37} 38 39#checkbox { 40 display: none; 41} 42 43#checkbox:checked + .switch { 44 background-color: red 45} 46 47#checkbox:checked + .switch .mic-off { 48 opacity: 1; 49} 50 51#checkbox:active + .switch { 52 scale: 1.2; 53}
691 views
691 views
MIT License