How would I reposition the 2 border lines in the middle of the linear-gradient?

My Code: https://jsfiddle.net/1xcyy92x/

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient(  to right,#000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  );border: 3px solid #0059dd; cursor: pointer;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  )';
    player.play();
  } else {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  )';
    player.pause();
  }">
</button>

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

I just figured out how to do it on my own.

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient(  to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  );border: 3px solid #0059dd; cursor: pointer;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #0ff 199px,#0059dd 199px, #0059dd 202px,  #fff 202px,  #fff 399px, #0059dd 399px, #0059dd 402px,  #f0f 402px  )';
    player.play();
  } else {
    playButton.innerHTML = '';
    playButton.style.background = 'linear-gradient(  to right,  #000000 199px,#0059dd 199px, #0059dd 202px,  #000000 202px,  #000000 399px, #0059dd 399px, #0059dd 402px,  #000000 402px  )';
    player.pause();
  }">
</button>

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

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