This code has a bug in it. That’s why I’m not using it.
Me attempting to do border, instead of box-shadow.
<style>
#playButton5 {
position: relative;
width: 260px;
height: 244px;
cursor: pointer;
background-color: #000000;
background-image: linear-gradient( to right,transparent 0, transparent 83px,transparent 83px, transparent 86px, transparent 86px, transparent 174px, transparent 174px, transparent 177px, transparent 177px,transparent 260px ), url('https://i.imgur.com/eMXhOn7.png');
border: 3px solid blue;
background-repeat: no-repeat;
background-size: 260px 244px;
}
.initial {
background-color: transparent;
}
.initial line {
stroke-width: 6;
stroke: #f00;
}
.initial circle {
stroke-width: 6;
stroke: #f00;
fill: black;
}
</style>
<div id="playButton5" onclick="
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">
<svg class="initial" width="260" height="244" viewbox="0 0 260 244">
<line x1="6" y1="122" x2="31" y2="122" ></line>
<line x1="38" y1="122" x2="108" y2="122" ></line>
<line x1="86" y1="44" x2="192" y2="105" ></line>
<line x1="137" y1="12" x2="137" y2="136" ></line>
<line x1="86" y1="105" x2="192" y2="44" ></line>
<line x1="152" y1="51" x2="188" y2="-12" ></line>
<line x1="191" y1="-17" x2="205" y2="-40" ></line>
<line x1="151" y1="98" x2="188" y2="161" ></line>
<line x1="191" y1="166" x2="205" y2="188" ></line>
<circle cx="138" cy="74" r="24.5"></circle>
</svg>
Can you explain to me what this line does, it’s your code?
<line x1="191" y1="-17" x2="205" y2="-40" ></line>
I just figured it out.
Thank you everyone for your help with this, especially @coothead
@coothead helped me do this:
Mimic an svg with a regular image code.
<style>
#playButton4 {
position: relative;
border: 3px solid #0059dd;
width: 260px;
height: 194px;
cursor: pointer;
background-color: black;
margin-top: 8px;
}
.img1 {
position:absolute;
background: url(https://i.imgur.com/BO6KOvw.jpg);
background-repeat: no-repeat;
background-position:center;
background-size: 170px 112px;
border-radius: 50%;
width: 170px;
height: 170px;
margin: 12px 45px;
}
.img2 {
position:absolute;
background: url(https://i.imgur.com/4HJbzEq.png);
background-repeat: no-repeat;
background-position:center;
background-size: 180px 180px;
width: 180px;
height: 180px;
margin: 7px 40px ;
}
#grad {
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 194px;
background-color: transparent;
background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
}
.button div {
position: absolute;
width: 38px;
height: 38px;
top: 76px;
left: 111px;
background-color: transparent;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
}
</style>
<div id="playButton4" onclick="
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">
<div class="img1"></div>
<div class="img2"></div>
<div id="grad"></div>
<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="player4" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</source></audio>
I got up this far
<style>
#playButton5 {
position: relative;
width: 260px;
height: 244px;
cursor: pointer;
background-color: #000000;
background-image: linear-gradient( to right,transparent 0, transparent 83px,transparent 83px, transparent 86px, transparent 86px, transparent 174px, transparent 174px, transparent 177px, transparent 177px,transparent 260px ), url('https://i.imgur.com/eMXhOn7.png');
border: 3px solid blue;
background-repeat: no-repeat;
background-size: 260px 244px;
}
.initial {
background-color: transparent;
}
.initial line {
stroke-width: 6;
stroke: #f00;
}
.initial circle {
stroke-width: 6;
stroke: ;
fill: transparent;
}
</style>
<div id="playButton5" onclick="">
<svg class="initial" width="260" height="244" viewbox="0 0 260 244">
<line x1="6" y1="122" x2="31" y2="122" ></line>
<line x1="38" y1="122" x2="108" y2="122" ></line>
<line x1="86" y1="44" x2="192" y2="105" ></line>
<line x1="135" y1="61" x2="135" y2="182" ></line>
<line x1="80" y1="153" x2="500" y2="-90" ></line>
<line x1="152" y1="51" x2="188" y2="-12" ></line>
<line x1="191" y1="-17" x2="205" y2="-40" ></line>
<line x1="148" y1="145" x2="183" y2="205" ></line>
<line x1="191" y1="166" x2="205" y2="188" ></line>
<circle cx="138" cy="74" r="24.5"></circle>
</svg>
This topic was automatically closed after 91 days. New replies are no longer allowed.