如何通过单击更改按钮的图像？

Question

我想将按钮的图像更改为另一张相同大小的图片，并在一定时间后将其更改回去。 例如，您单击房屋的图片，它将变为天空，然后无需执行任何操作即可返回房屋。 从第二张图片变回第一张图片之间的时间不应禁止再次单击该按钮。

因此，由于我还很新，我进行了很多搜索，但找不到关于我的问题或我理解的东西。 我用HTML制作了一个按钮，在CSS中链接了一个类，该类具有应该用作按钮的图像的URL。 到目前为止，它仍然有效。 我该如何继续？

 -> HTML
<button class="buttonn" > 
-> CSS
.buttonn {
 background-image:url([Link to the image]);

Answer 1

您可以考虑活动状态的过渡和延迟：

 button { padding:20px; border:none; background-image: url(https://picsum.photos/id/1/200/200), url(https://picsum.photos/id/10/200/200); background-size:0 0,cover; /* The top one invisible*/ background-position:center; background-repeat:no-repeat; transition: 0s 1s; } button:active { background-size:100% 100%,cover; transition: 0s; } 

 <button>click me</button> 

也是这样：

 button { padding:20px; border:none; background-image: url(https://picsum.photos/id/10/200/200); background-size:cover; background-position:center; background-repeat:no-repeat; transition: 0s 1s; } button:active { background-image: url(https://picsum.photos/id/1/200/200); transition: 0s; } 

 <button>click me</button>