Hey there! I recently attempted to customize my button like Spotify.
I wanted the table row to display a play button when hovered over, and when clicked, the image would change.
https://i.sstatic.net/aJIna.jpg
After seeking advice from another fiddle and making some updates, now when I click on one element, the other one hides. However, I'm still figuring out how to hide one of them initially.
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:hover {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
display: none;
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}<a id="btn" href="#btn">Play</a>
<a id="btn2" href="#btn2">Pause</a>