[SOLVED] Why isn't speaker using box-shadow, in the same position, as the code using border?

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>

Fixed it using
margin:97px 103px;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.