709 views
1.glowMe, 2.glowAll { 3 opacity: 0; 4 transition: opacity 300ms linear 0s; 5} 6 7.button-container svg { 8 width: 100px; 9 height: 100px; 10 cursor: pointer; 11} 12 13.button-container svg:hover .glowMe { 14 opacity: 0.5; 15} 16 17.button-container svg:hover .glowAll { 18 opacity: 1; 19} 20 21.button-container .buttonTop { 22 fill: #5f309b; 23 transition: fill 300ms linear 0s; 24} 25 26.button-container svg:hover .buttonTop { 27 fill: #a661ff; 28} 29 30.button-container .buttonSides { 31 fill: #371b5b; 32 transition: fill 300ms linear 0s; 33} 34 35.button-container svg:hover .buttonSides { 36 fill: #763ac2; 37} 38 39.button-container svg:focus { 40 outline: none; 41} 42 43.button-container svg:focus .buttonTop, 44.button-container svg:focus .playSides { 45 stroke: white; 46 stroke-width: 2px; 47} 48 49.button-container svg:focus .playSides { 50 stroke-width: 1px; 51} 52 53.button-container svg:active .buttonTop { 54 fill: #c79cff; 55} 56 57.button-container svg:nth-of-type(1) { 58 transform: translate(37%, -35%); 59} 60 61.button-container svg:nth-of-type(3) { 62 transform: translate(-37%, 35%); 63} 64
MIT License