<style>
img {
display: inline-block;
width: 60px;
height: 60px;
background: gray;
border-radius: 50%;
}
.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>