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