The play svg, and the pause svg are in the exact same spot as both, how come with speaker they are not in the same exact spot?
Box-Shadow
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/266x266" aria-hidden="true" alt="" />
</div>
<div id="playButton2" style="width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px );box-Shadow:inset 0 0 0 3px #0059dd;"
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 86px,#e77d19 86px, #e77d19 89px, transparent 89px, transparent 177px, #e77d19 177px, #e77d19 180px, transparent 180px ), url(\'https://via.placeholder.com/266x266\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='inline-block';
document.querySelector('#playButton2 .play').style.display='none';
player.play();
} else {
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 86px,#e77d19 86px, #e77d19 89px, transparent 89px, transparent 177px, #e77d19 177px, #e77d19 180px, transparent 180px ), url(\'https://via.placeholder.com/266x266\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}"onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .pause').style.display='inline-block';
}"
onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">
<svg class="initial" style="margin:79px 88px;" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:79px 88px;background-color:red;" width="90" height="108" viewbox="-13 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="play" style="display: none;margin:79px 88px;" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg'></source>
</audio>
Border
<div style="visibility: hidden; position: absolute">
<img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="" />
</div>
<div id="playButton2" style="width: 260px; height: 260px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='inline-block';
document.querySelector('#playButton2 .play').style.display='none';
player.play();
} else {
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}"onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .pause').style.display='inline-block';
}"
onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">
<svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:76px 85px;background-color:red;" width="90" height="108" viewbox="-13 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display:none;margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="play" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg'></source>
</audio>