How to implement the button css like Spotify play button in the table row

Question

Hi I tried to custom my button like Spotify.

When hover the table row show play button and click the play button change image.

I consulted from other fiddle and updated. Now I click one element and the other one will hide. However, I don't know how to hide one of them in the beginning.

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>

Answer 1

You can do following way using pure css without scripting.

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:nth-last-child(2){
  display:none;
  }
a:first-child:target + a:nth-last-child(2){
  display:block;
  }

<a id="btn" href="#btn">Play</a>
<a id="btn2" href="#btn2">Pause</a>