Where do I place: backgroundColor to get this visiual effect?
@ronpat showed me this before I think and I forgot how to do it using this code.
This is the effect, I forgot how to re-produce it.
I forget where to placeit: It’s not working.
playButton.style.backgroundColor = 'red';
<button id="playButton" style="display:block;width: 266px;height:24px;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');
player.volume=1.0;
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='' type='audio/mpeg' />
</audio>