简单的Javascript按钮点击动画(完成时带有回调)

<button id="myButton">点击我</button>

#myButton {
  width: 100px;
  height: 40px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#myButton:hover {
  background-color: #0056b3;
}

var button = document.getElementById("myButton");

button.addEventListener("click", function() {
  // 添加点击动画效果
  button.style.transform = "scale(0.9)";
  
  // 动画完成后执行回调函数
  setTimeout(function() {
    button.style.transform = "scale(1)";
    // 在这里执行回调函数的代码
    console.log("动画完成");
  }, 300);
});