One gradient to mimic the other

[asasass]

I’m trying to get the gradient on the border version, the 2 lines going down to look the same as the Box-Shadow version.

You can’t use exactly the same numbers cause one uses border, the other box shadow, so the spacing is different.

The border gradient is in the right spot at 3px. Just the hue needs to be adjusted.

Border Version

Edit fiddle - JSFiddle - Code Playground

          <stop offset="0%" stop-color="transparent"></stop>
          <stop offset="32%" stop-color="transparent"></stop>
          <stop offset="32%" stop-color="#0059dd"></stop>
          <stop offset="33.2%" stop-color="#0059dd"></stop>
          <stop offset="33.2%" stop-color="transparent"></stop>
          <stop offset="67%" stop-color="transparent"></stop>
          <stop offset="67%" stop-color="#0059dd"></stop>
          <stop offset="68.2%" stop-color="#0059dd"></stop>
          <stop offset="68.2%" stop-color="transparent"></stop>
          <stop offset="100.2%" stop-color="transparent"></stop>

Box-Shadow Version

Edit fiddle - JSFiddle - Code Playground

          <stop offset="0%" stop-color="transparent"></stop>
          <stop offset="33%" stop-color="transparent"></stop>
          <stop offset="33%" stop-color="#0059dd"></stop>
          <stop offset="34.3%" stop-color="#0059dd"></stop>
          <stop offset="34.3%" stop-color="transparent"></stop>
          <stop offset="68%" stop-color="transparent"></stop>
          <stop offset="68%" stop-color="#0059dd"></stop>
          <stop offset="69.3%" stop-color="#0059dd"></stop>
          <stop offset="69.3%" stop-color="transparent"></stop>
          <stop offset="102.3%" stop-color="transparent"></stop>

[asasass]

This looks better:

<style>
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }
</style>

<div id="playButton8" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 194px;cursor: pointer;" onclick=" 
var button = document.getElementById('playButton8');
var player = document.getElementById('player8');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

  <svg width="260" height="194">

    <defs>
      <clippath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clippath>
    </defs>

    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>

    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>

    <svg width="260" height="194">
      <defs>
        <lineargradient id="MyGradient">
          <stop offset="0%" stop-color="transparent"></stop>
          <stop offset="31.9%" stop-color="transparent"></stop>
          <stop offset="31.9%" stop-color="#0059dd"></stop>
          <stop offset="33.2%" stop-color="#0059dd"></stop>
          <stop offset="33.2%" stop-color="transparent"></stop>
          <stop offset="66.8%" stop-color="transparent"></stop>
          <stop offset="66.8%" stop-color="#0059dd"></stop>
          <stop offset="68.1%" stop-color="#0059dd"></stop>
          <stop offset="68.1%" stop-color="transparent"></stop>
          <stop offset="100%" stop-color="transparent"></stop>
        </lineargradient>
      </defs>

      <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="194"></rect>
    </svg>
  </svg>

  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>

  </div>

</div>

<audio id="player8" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>