按鈕動畫怎么做？

按鈕動畫是一種讓網頁更加生動有趣的元素，下面介紹兩種簡單的實現方式：

1. CSS3過渡效果

使用CSS3的過渡效果可以輕松地為按鈕添加動畫效果。比如，當鼠標懸停在按鈕上時，可以將背景顏色從灰色變成綠色，并且文字顏色從白色變成黑色。

代碼如下：

button { background-color: gray; color: white; transition: all 0.5s ease; } button:hover { background-color: green; color: black; }

2. JavaScript事件監聽器

使用JavaScript可以實現更加復雜的按鈕動畫效果。比如，當用戶點擊按鈕時，可以讓它先縮小一下再放大回去。

代碼如下：

const button = document.querySelector("button"); button.addEventListener("click", () => { button.style.transform = "scale(0.8)"; setTimeout(() => { button.style.transform = "scale(1)"; }, 300); });

以上是兩種簡單的實現方式，根據需要可以進行擴展和修改。希望對你有所幫助！