[Nexus]

<style>
img {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: gray;
}

.play-button {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}

.play-button:hover:before,
.play-button:hover:after,
.play-button.play-button--playing:before,
.play-button.play-button--playing:after {
  content: '';
  background: #000;
  opacity: .3;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.play-button:hover:after,
.play-button.play-button--playing:after {
  background: url('https://beatbass.ru/design/images/ms.png');
  background-size: cover;
}

.play-button.play-button--playing:after {
  background: url('https://beatbass.ru/design/images/ms_2.png');
  background-size: cover;
}

.play-button--playing img {
    animation: spin 4s linear infinite;
}
 
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const buttons = document.querySelectorAll(".play-button");
    const NOW_PLAYING_CLASS_NAME = "play-button--playing";

    buttons.forEach(node => {
        node.addEventListener("click", e => {
            e.preventDefault();

            const isNowPlaying = node.classList.contains(NOW_PLAYING_CLASS_NAME);

            buttons.forEach(button => {
                button.classList.toggle(NOW_PLAYING_CLASS_NAME, !isNowPlaying && node === button);
            });
        });
    });
});
</script>

<a href="#" class="play-button"><img src="" alt="img-1"></a>
<a href="#" class="play-button"><img src="" alt="img-2"></a>
<a href="#" class="play-button"><img src="" alt="img-3"></a>