<div class="wrapper">
        <button class="square" id="1">
            Button 1
        </button>
        <button class="square" id="2">
            Button 2
        </button>
        <button class="square" id="3">
            Button 3
        </button>
        <button class="square" id="4">
            Button 4
        </button>
        <button class="square" id="5">
            Button 5
        </button>
        <button class="square" id="6">
            Button 6
        </button>
    </div>
*,
*::after,
*::before {
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
}

html,
body {
    width: 100vw;
    height: 100vh;
}

.wrapper,
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper {
    gap: 12px;
}

button.square {
    width: 70px;
    height: 70px;
    padding: 12px;
    background-color: #ddd;
    color: #000;
    border-radius: 11px;
    cursor: pointer;
    transition: all .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.button.square.reverse {
    transition: all 12s cubic-bezier(0.215, 0.610, 0.355, 1);

}

button.square:hover {
    border: 8px;
}
const buttons = document.querySelectorAll(".square");

for (const button of buttons) {
    button.addEventListener("click", UpdateSquares);
}

let array_sqr = [];

function UpdateSquares(event) {
    const btn = event.target;
    btn.style.backgroundColor = 'green';
    array_sqr.push(btn.id);

    if (array_sqr.length == 6) {
        ReverseSquares();
    }
}

function ReverseSquares() {
    array_sqr.reverse();
    // Use for..of loop to apply different timeouts for each button
    for (const [index, id] of array_sqr.entries()) {
        const reverse_btn = document.getElementById(id);

        // Remove the color after a delay, with increasing delay for each button
        setTimeout(() => {
            reverse_btn.style.backgroundColor = 'white';
        }, index * 1000);

        /* Also clear the array */
        array_sqr = [];
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.