Image Sprites
This is not the same as the below code and should be.
.playButtonb {
position: relative;
width: 260px;
height: 260px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
border: 3px solid #0059dd;
background-position: -0px -260px;
width: 260px;
height: 260px;
}
.playButtonb.active {
border: 3px solid #e77d19;
background-position: -0px -0px;
width: 260px;
height: 260px;
}
It’s not the same as this:
It should look and act like this:
.playButtonb {
position: relative;
width: 260px;
height: 260px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
border: 3px solid #0059dd;
}
.playButtonb.active {
border: 3px solid #e77d19;
background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/E0dNaoX.png");
}