Like this?
Code: https://jsfiddle.net/L94rmxy0/
And, is there anything in this code that can be removed without affecting, or degrading the appearance of the image?
#container_button {
background-color: #252525;
width: 31.25vw;
height: 31.25vw;
margin-left: auto;
margin-right: auto;
margin-bottom: 0vw;
margin-top: 0vw;
-webkit-border-radius: 15.625vw;
-moz-border-radius: 15.625vw;
border-radius: 15.625vw;
-webkit-box-shadow: inset 0vw 0.1563vw 0vw #585858, 0.0781vw 0.0781vw 0vw #000, 0.1563vw 0.1563vw 0.3906vw #000;
-moz-box-shadow: inset 0vw 0.1563vw 0vw #585858, 0.0781vw 0.0781vw 0vw #000, 0.1563vw 0.1563vw 0.3906vw #000;
box-shadow: inset 0vw 0.1563vw 0vw #585858, 0.0781vw 0.0781vw 0vw #000, 0.1563vw 0.1563vw 0.3906vw #000;
}
#hole {
background-color: #151515;
width: 24.2188vw;
height: 24.2188vw;
margin-left: auto;
margin-right: auto;
top: 3.9063vw;
position: relative;
-webkit-border-radius: 12.1094vw;
-moz-border-radius: 12.1094vw;
border-radius: 12.1094vw;
-webkit-box-shadow: 0.0781vw 0.0781vw 0vw #5d5d5d;
-moz-box-shadow: 0.0781vw 0.0781vw 0vw #5d5d5d;
box-shadow: 0.0781vw 0.0781vw 0vw #5d5d5d;
}
#button {
width: 23.4375vw;
height: 23.4375vw;
margin-left: auto;
margin-right: auto;
overflow: auto;
cursor: pointer;
top: -0.3906vw;
position: relative;
background-image: linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
background-image: -o-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
background-image: -moz-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
background-image: -webkit-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
background-image: -ms-linear-gradient(bottom, rgb(82, 79, 82) 0%, rgb(134, 134, 134) 57%);
-webkit-border-radius: 11.7188vw;
-moz-border-radius: 11.7188vw;
border-radius: 11.7188vw;
-webkit-box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8, 0vw 0.1563vw 0vw #2a2a2a, 0vw 0.2344vw 0vw #2a2a2a, 0vw 0.3125vw 0vw #2a2a2a, 0vw 0.3906vw 0vw #2a2a2a, 0vw 0.4688vw 0vw #2a2a2a, 0vw 0.5469vw 0vw #2a2a2a, 0vw 0.625vw 0vw #2a2a2a, 0vw 0.7031vw 0vw #2a2a2a, 0vw 0.7813vw 0vw #2a2a2a, 0.7813vw 1.5625vw 0.7813vw #000;
-moz-box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8, 0vw 0.1563vw 0vw #2a2a2a, 0vw 0.2344vw 0vw #2a2a2a, 0vw 0.3125vw 0vw #2a2a2a, 0vw 0.3906vw 0vw #2a2a2a, 0vw 0.4688vw 0vw #2a2a2a, 0vw 0.5469vw 0vw #2a2a2a, 0vw 0.625vw 0vw #2a2a2a, 0vw 0.7031vw 0vw #2a2a2a, 0vw 0.7813vw 0vw #2a2a2a, 0.7813vw 1.5625vw 0.7813vw #000;
box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8, 0vw 0.1563vw 0vw #2a2a2a, 0vw 0.2344vw 0vw #2a2a2a, 0vw 0.3125vw 0vw #2a2a2a, 0vw 0.3906vw 0vw #2a2a2a, 0vw 0.4688vw 0vw #2a2a2a, 0vw 0.5469vw 0vw #2a2a2a, 0vw 0.625vw 0vw #2a2a2a, 0vw 0.7031vw 0vw #2a2a2a, 0vw 0.7813vw 0vw #2a2a2a, 0.7813vw 1.5625vw 0.7813vw #000;
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
}
#button:active {
top: 0.3906vw;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: inset 0vw 0.1563vw 0vw #a8a8a8;
}
#triangle {
width: 0vw;
height: 0vw;
margin-left: 50%;
margin-top: 50%;
left: -2.1094vw;
top: -3.9063vw;
position: relative;
border-top: 3.9063vw solid transparent;
border-bottom: 3.9063vw solid transparent;
border-left: 6.25vw solid #22a9db;
z-index: 2;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#button:hover #triangle {
border-left: 6.25vw solid #45bde9
}
#button:active #triangle {
border-left: 6.25vw solid #e94545
}
#lighter_triangle {
width: 0vw;
height: 0vw;
margin-left: 50%;
margin-top: 50%;
left: -2.1094vw;
top: -3.75vw;
position: absolute;
border-top: 3.9063vw solid transparent;
border-bottom: 3.9063vw solid transparent;
border-left: 6.25vw solid #43c0ee;
z-index: 1;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#button:hover #lighter_triangle {
border-left: 6.25vw solid #8bdaf7
}
#button:active #lighter_triangle {
border-left: 6.25vw solid #f78b8b
}
#darker_triangle {
width: 0vw;
height: 0vw;
margin-left: 50%;
margin-top: 50%;
left: -2.1875vw;
top: -4.1406vw;
position: absolute;
border-top: 3.9063vw solid transparent;
border-bottom: 3.9063vw solid transparent;
border-left: 6.25vw solid #0a7da7;
z-index: 1;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
#button:hover #darker_triangle {
border-left: 6.25vw solid #1d98c5
}
#button:active #darker_triangle {
border-left: 6.25vw solid #c51d1d
}
<div id="container_button">
<div id="hole">
<div id="button">
<div id="triangle"></div>
<div id="lighter_triangle"></div>
<div id="darker_triangle"></div>
</div>
</div>
</div>