#e8e8e8
1/* The switch - the box around the speaker*/ 2.toggleSwitch { 3 width: 50px; 4 height: 50px; 5 position: relative; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 background-color: rgb(39, 39, 39); 10 border-radius: 50%; 11 cursor: pointer; 12 transition-duration: .3s; 13 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13); 14 overflow: hidden; 15} 16 17/* Hide default HTML checkbox */ 18#checkboxInput { 19 display: none; 20} 21 22.bell { 23 width: 18px; 24} 25 26.bell path { 27 fill: white; 28} 29 30.speaker { 31 width: 100%; 32 height: 100%; 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 z-index: 2; 37 transition-duration: .3s; 38} 39 40.speaker svg { 41 width: 18px; 42} 43 44.mute-speaker { 45 position: absolute; 46 width: 100%; 47 height: 100%; 48 display: flex; 49 align-items: center; 50 justify-content: center; 51 opacity: 0; 52 z-index: 3; 53 transition-duration: .3s; 54} 55 56.mute-speaker svg { 57 width: 18px; 58} 59 60#checkboxInput:checked +.toggleSwitch .speaker { 61 opacity: 0; 62 transition-duration: .3s; 63} 64 65#checkboxInput:checked +.toggleSwitch .mute-speaker { 66 opacity: 1; 67 transition-duration: .3s; 68} 69 70#checkboxInput:active + .toggleSwitch { 71 transform: scale(0.7); 72} 73 74#checkboxInput:hover + .toggleSwitch { 75 background-color: rgb(61, 61, 61); 76}
2.4K views
2.4K views
Comments
MIT License