Checkbox by barisdogansutcu
#e8e8e8
1.volume { 2 width: 60px; 3 height: 60px; 4 border-radius: 100%; 5 background-color: rgb(205, 191, 247); 6 overflow: hidden; 7 position: relative; 8} 9.volume-icon { 10 width: 100%; 11 height: 100%; 12 display: flex; 13 align-items: center; 14 justify-content: center; 15 transition: all 0.5s ease; 16 overflow: hidden; 17 position: relative; 18} 19.volume-input { 20 position: absolute; 21 inset: 0; 22 opacity: 0; 23 cursor: pointer; 24 z-index: 999; 25} 26.volume-icon:before { 27 content: ""; 28 display: flex; 29 width: 0px; 30 height: 0px; 31 border-radius: 100%; 32 transition: all 0.2s ease; 33 position: absolute; 34 left: 50%; 35 top: 50%; 36 transform: translate(-50%, -50%); 37 background-color: rgb(32, 33, 36); 38} 39.volume-input:checked + .volume-icon:before { 40 width: calc(100% + 4px); 41 height: calc(100% + 4px); 42} 43.volume-svg { 44 z-index: 2; 45 color: rgb(32, 33, 36); 46 height: 30px; 47 width: 30px; 48} 49.volume-input:checked + .volume-icon svg { 50 color: rgb(255, 255, 255); 51} 52
325 views
325 views
MIT License