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

Question

我想将按钮的图像更改为另一张相同大小的图片，并在一定时间后变回。例如，你点击一个房子的图片，它会变成天空，然后没有任何动作回到房子。第 2 张图片变回第 1 张图片之间的时间不应阻止按钮再次被点击。

所以，由于我是新手，所以我进行了很多搜索，但找不到有关我的问题或我理解的内容。我在 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>