How can I let the image of a button change by clicking it?

Question

I'd like to have the image of a button changing to another picture of the same size, and after a certain amount of time changed back. For example, you click on a picture of a house, it will change to the sky, then without any action back to the house. The time between the 2nd picture changing back to the 1st should not prohibit the button being clicked again.

So, since I'm fairly new, I searched a lot but couldn't find something regarding my problem, or something I understood. I made a button in HTML, linked a class in CSS which has the URL of the image that's supposed to act as the button. So far, it works. How do I continue?

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

Answer 1

You can consider transition and delay on active state:

 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> 

Like this too:

 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>